echarts之markArea分区域显示不同颜色

一、需求

如下图，项目中需要这样的效果，在不同的时间区域显示不同颜色。

二、步骤拆分

1、先画折线图

如果暂时忽略高亮不看的话，这个echart很容易实现,X轴xAxis，y轴yAxis,series三部曲：

js 复制代码

var option = {
    xAxis: {
        type: 'category',
        data: xAxisData
        //网格样式
        splitLine: {
            show: true,
            lineStyle:{
                color: ['rgb(229, 233, 242)'],
                width: 1,
                type: 'solid'
            }
        },
        axisLabel:{
            rotate:20,
            interval:0
        }
    },
    yAxis: { 
        type: 'value',
         //网格样式
         splitLine: {
            show: true,
            lineStyle:{
                color: ['rgb(229, 233, 242)'],
                width: 1,
                type: 'solid'
            }
        }
    },
    series: [{
        name: '发布时间',
        data: data,
        type: 'line',

    }]
}

2、再加高亮

①markArea介绍

通过查阅官方文档有一个属性markArea图表标域，常用于标记图表中某个范围的数据，例如标出某段时间投放了广告。

②markArea常用属性方法

markArea.slient //boolean 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
markArea.label //Object 标域文本配置。
markArea.itemStyle //Object 该标域的样式。
markArea.emphasis //Object 高亮的标域样式。
markArea.blur //Object 淡出的标域样式。淡出的规则跟随所在系列。
markArea.data //any

标域的数据数组。每个数组项是一个两个项的数组，分别表示标域左上角和右下角的位置，每个项支持通过下面几种方式指定自己的位置

通过 x, y 属性指定相对容器的屏幕坐标，单位像素，支持百分比。

用 coord 属性指定数据在相应坐标系上的坐标位置，单个维度支持设置 'min', 'max', 'average'。

直接用 type 属性标注系列中的最大值，最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

如果是笛卡尔坐标系的话，也可以通过只指定 xAxis 或者 yAxis 来实现 X 轴或者 Y 轴为某值的标域，见示例 scatter-weight 当多个属性同时存在时，优先级按上述的顺序。

③markArea使用范围

markArea通常配合其他的图表类型或者组合图表使用，在不同的图表类型中，markArea的效果也是不一样的，可以用于突出主要数据、标识异常数据或者比较不同数据之间的差异。

比如在折线图中使用markArea，可以用来标记某个时间段内的数据变化，让用户更直观地看到数据的趋势。

3、示例

下面我们可以看到markArea的使用方法和一些参数说明。

js 复制代码

series: [{
    name: '发布时间',
    data: data,
    type: 'line',
    markArea: {
        itemStyle: {
          color: 'rgba(255, 173, 177, 0.4)'
        },
       data: [
              [
                {
                  name: '间歇',
                  xAxis: '12:00-14:00',
                  itemStyle: {
                    color: 'rgba(255, 173, 177, 0.4)'
                  },
                },
                {
                  xAxis: '14:00-16:00'
                }
              ],
              [
                {
                  name: '睡前',
                  xAxis: '18:00-20:00',
                  itemStyle: {
                    color: 'rgba(255, 173, 177, 1)'
                  },
                },
                {
                  xAxis: '22:00-24:00'
                }
              ]
            ]
      }
}]

以上参考了官方文档：echarts.apache.org/zh/option.h...

前端菜鸟，谨把自己遇到的问题整理出来方便以后查阅，望路过的大佬指点一二~

后续遇到问题再继续补充。