vue echarts heatmap 热力图 单元格默认灰色改为白色

daokeaaaaa
  • 11

image.png

代码:

const days = ['12a', '1a', '2a', '3a', '4a', '5a', '6a']
const hours = [
'00:00~00:59',
'01:00~01:59',
'02:00~02:59',
'03:00~03:59',
'04:00~04:59',
'05:00~05:59',
'06:00~06:59',
'07:00~07:59',
'08:00~08:59',
'09:00~09:59',
'10:00~10:59',
'11:00~11:59',
'12:00~12:59',
'13:00~13:59',
'14:00~14:59',
'15:00~15:59',
'16:00~16:59',
'17:00~17:59',
'18:00~18:59',
'19:00~19:59',
'20:00~20:59',
'21:00~21:59',
'22:00~22:59',
'23:00~23:59',
]

const data = [

[0, 0, 5],
[0, 1, 1],
[0, 2, 0],
[0, 3, 0],
[0, 4, 0],
[0, 5, 0],
[0, 6, 0],
[0, 7, 0],
[0, 8, 0],
[0, 9, 0],
[1, 0, 7],
[1, 1, 0],
[1, 2, 0],
[1, 3, 0],
[1, 4, 0],

]
const series = data.map(item => {

return [item[1], item[0], item[2] || '-']

})
const option = {

title: {
  text: '近一周事件发生热力图',
  textStyle: {
    color: '#999999',
    fontSize: 12,
    fontWeight: 'lighter',
  },
},
tooltip: {
  position: 'top',
},
grid: {
  height: '87%',
  top: '30px',
  bottom: '15px',
},
xAxis: {
  type: 'category',
  data: days,
  splitArea: {
    show: true,
  },
},
yAxis: {
  type: 'category',
  axisTick: { show: true },
  data: hours,
  axisLabel: {
    interval: 0,
  },
  splitArea: {
    show: true,
  },
},
visualMap: {
  min: 0,
  max: 4,
  calculable: true,
  orient: 'horizontal',
  left: 'center',
  inRange: {
    color: ['#ffffff', '#b2503b'],
  },
},
series: [
  {
    name: 'Punch Card',
    type: 'heatmap',
    data: series,
    label: {
      show: true,
      color: 'white',
    },
    itemStyle: {
      color: '#ffffff',
      borderType: 'solid',
      borderWidth: '1px',
      borderColor: '#000000',
    },
    emphasis: {
      itemStyle: {
        borderWidth: '1px',
        shadowBlur: 10,
        shadowColor: '#000000',
      },
    },
  },
],

}

回复
阅读 78
1 个回答

echarts 图表后面背景色

"splitArea": { "show": true, "areaStyle": { "color": [ "blue" ] } }

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏