#heatmap #echarts
#тепловая карта #электронные диаграммы
Вопрос:
Есть ли способ применить ширину границы вокруг элементов данных в электронных диаграммах тепловой карты?
Я пытаюсь создать таблицу, подобную диаграмме, с цветами, применяемыми к каждой ячейке на основе некоторого условия. как показано ниже
Похоже, я могу использовать решение тепловой карты, как показано ниже, но мне нужно применить некоторую ширину границы вокруг элементов данных. В настоящее время все они объединены вместе.
https://echarts.apache.org/examples/en/editor.html?c=heatmap-cartesian
Я просмотрел документацию по электронным диаграммам, но не нашел ни одной опции для применения ширины границы или некоторого заполнения вокруг элементов данных.
Какие-либо предложения по этому поводу, пожалуйста?
Ответ №1:
Попробуйте задать ширину границы с помощью стилей:
itemStyle: {
borderWidth: 3
}
Документы: https://echarts.apache.org/en/option.html#series-heatmap.itemStyle.borderWidth
Комментарии:
1. Извините, я в дороге и не могу протестировать его с мобильного телефона.
2. Да, это работает. Похоже, я просто пропустил эту опцию, но есть ли какая-либо возможность применить ширину границы и к пустым элементам? чтобы у нас были согласованные промежутки между линиями? Я пробовал spiltLine как на xAxis, так и на yAxis в сочетании с borderWidth, и это работает для большей части части, но когда на xAxis или yAxis слишком много элементов, это не дает желаемого результата.
3. Я в отпуске, и у меня все еще нет ноутбука для тестирования, и мой ответ может быть неправильным. Вы можете попробовать вариант с установкой для пустых ячеек нулевого значения и стилизовать как пустые ячейки с помощью visualMap. Это может быть не совсем просто, но это первое, что приходит на ум. Если это не удастся, я попытаюсь найти решение в первые рабочие дни после этих праздников.
Ответ №2:
В дополнение к ответу Сергея, вот подробная альтернатива:
series: [
{
name: 'Heatmap',
type: 'heatmap',
data: data,
label: {
show: false
},
itemStyle: {
borderWidth: 1,
borderType: 'solid',
borderColor: '#ffffff'
},