echarts - ECharts 图表绘制技巧：如何实现谷、平、峰的视觉区分？

Question

该图表用echarts怎样实现，用各个颜色代表谷、平、峰...
比如01:00-05:00 时段代表谷背景是绿色；
06:00-08:00 时段代表平背景是蓝色
12:00-18:00 时段代表峰背景是红色

Answer 1

如果我没理解错的话，官网例子是有你说的效果的，只改变了中间一段
https://echarts.apache.org/examples/zh/editor.html?c=line-sec...
用到的属性是markArea
https://echarts.apache.org/zh/option.html#series-line.markArea

Answer 2

效果图

代码

splitArea属性；我比较懒，怎么简单怎么来。只是告诉你有这个属性，丰富或者优化代码，你自己来。

参考文档：https://echarts.apache.org/zh/option.html#xAxis.splitArea

option = {
xAxis: {
  type: 'category',
  data: ['01:00 ', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00'],
  splitArea: {
        show: true,
        areaStyle: {
            "color": ["#B3FFB3", "#B3FFB3", "#B3FFB3", "#B3FFB3", "#B3FFB3", "#3FC9FF", "#3FC9FF"]
        }
    }
},
yAxis: {
  type: 'value',

},
series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line'
  }
]
  };