echarts的markArea图表标域的灵活运用

首先上图看效果：

可以看到图中蓝色 图表标域的地方是正好在中间标注了X轴的其中一个点，

而ecahrts官网的例子是

在两个X轴点位上的，

那么标注在中间怎么做到的呢，看操作。

首先需要了解markArea，这里就不过多阐述了，我们是用X轴的百分比值的方式设置标注。

需要在你图表处计算收尾点位的百分比值分别是多少，如图所示：

左侧初始百分比为10% 结束百分比为90% 那么图中总百分比为90% - 10% 为 80%

然后计算表中颜色中的点位数-1 ，也就是X轴点数-1 求图中线段数量。

图中为20个点位 线段数则为19。

那么每个点的X轴百分比为80/19 ≈ 4.2%

每段线总长度可以求出，一半就是中线的距离，直接上代码。

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '',
      type: 'line',
      smooth: true,
      // prettier-ignore
      data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
      markArea: {
        itemStyle: {
          color: 'rgba(255, 173, 177, 0.4)'
        },
        //当前为
        data: [
          [
            {
              name: 'Morning Peak',
              x: '10%'
            },
            {
              x: '90%'
            }
          ]
        ]
      }
    }
  ]
};
//当前为需要标注的对象数组
const peak = ['07:30','20:00']
//计算每个线段X轴百分比
const itemRatio = 80/(option.xAxis.data.length-1)
peak.map((peak)=>{
    //当前所选位置的索引
    let peakIndex = option.xAxis.data.indexOf(peak)
    //设置起始位置，要把开始的百分之10加上
    let xStart = 10+itemRatio*peakIndex
    option.series[0].markArea.data.push([{
            name: '',
            //减掉长度的一半为中心点左侧
            x: xStart-(itemRatio/2)+'%',
            itemStyle: {
                color: "rgba(50, 163, 182, 0.16)",
                borderColor: "#00A5C4",
                borderWidth: 2,
                borderType: 'dotted'
            },
        },
        {
          //加上长度的一半为中心点右侧
            x: xStart+(itemRatio/2)+'%',
        },
    ])
})

可直接复制代码到echarts里去调试

看图，拿下！

2022/7/15 更新：只添加边线的样式，配合markLine实现，代码在下方。

同cv进入echart编辑页面进行调试食用。

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '',
      type: 'line',
      smooth: true,
      // prettier-ignore
      data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
      markArea:{
        data:[]
      },
      markLine: {
        lineStyle:{
          color: 'rgba(50, 163, 182, 0.16)',
          width:2
        },
        symbolSize :0,
        //当前为
        data: []
      }
    }
  ]
};
//当前为需要标注的对象数组
const peak = ['07:30','20:00']
//计算每个线段X轴百分比
const itemRatio = 80/(option.xAxis.data.length-1)
peak.map((peak)=>{
    //当前所选位置的索引
    let peakIndex = option.xAxis.data.indexOf(peak)
    //设置起始位置，要把开始的百分之10加上
    let xStart = 10+itemRatio*peakIndex
    option.series[0].markArea.data.push([{
            name: '',
            //减掉长度的一半为中心点左侧
            x: xStart-(itemRatio/2)+'%',
            itemStyle: {
                color: "rgba(50, 163, 182, 0.16)",
                borderColor: "#00A5C4",
                borderWidth: 0,
                borderType: 'dotted'
            },
        },
        {
          //加上长度的一半为中心点右侧
            x: xStart+(itemRatio/2)+'%',
        },
    ])
    //当前为 侧边虚线数据
    option.series[0].markLine.data.push([{
            name: '',
            //减掉长度的一半为中心点左侧
            x: xStart-(itemRatio/2)+'%',
            itemStyle: {
                color: "rgba(50, 163, 182, 0.16)",
                borderColor: "#00A5C4",
                borderWidth: 20,
                borderType: 'dotted'
            },
            y: '90%'
        },
        {
          //加上长度的一半为中心点右侧
            x: xStart-(itemRatio/2)+'%',
            y: '8%'
        },
    ],[{
            name: '',
            //减掉长度的一半为中心点左侧
            x: xStart+(itemRatio/2)+'%',
            itemStyle: {
                color: "rgba(50, 163, 182, 0.16)",
                borderColor: "#00A5C4",
                borderWidth: 20,
                borderType: 'dotted'
            },
            y: '90%'
        },
        {
          //加上长度的一半为中心点右侧
            x: xStart+(itemRatio/2)+'%',
            y: '8%'
        },
    ])
})