echarts 中 markLine垂直于X轴线， 折线图上新增区域块加颜色markarea

一 效果图

二 代码

{
            data: [0.54, 0.52, 0.72, 0.82, 0.44, 0.36, 0.82, 0.52, 0.74],
            type: 'line',
            markLine: {
              lineStyle: {
                width: 3,
                color: '#F7B500',
              },
              label: {
                show: true,
                position: 'end',
                formatter: '11.25万',
                color: '#32383B',
                height: 10,
                padding: [12, 12, 7, 12],
                lineHeight: 10,
                borderWidth: 2,
                borderColor: '#F7B500',
                borderRadius: 2,
                fontWeight: 550,
                fontFamily: 'HYQiHeiX1-GEW',
              },
              silent: true, // 鼠标悬停事件, true悬停不会出现实线
              symbol: 'none', // 去掉箭头
              data: [[
                { coord: [2, 0] }, // [x第几个（从0开始），y轴起始点 ]
                { coord: [2, 0.98] } // [x第几个（从0开始），y轴起始点 ]
              ]]
            }
          },

这里也可以用x轴的值， 但是要用string  如果你的x轴是number 改为string

data: [[
                { coord: ['12', 0] }, // [x轴值，y轴起始点 ]
                { coord: ['12', 0.98] } // [x轴值，y轴起始点 ]
              ]]

或者

将x轴type category改为value格式， 这样就可以直接传入一个任意一个值定位 

如果是category 只能判断x轴上的点不能定位任意一个点的位置

xAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(171, 170, 170, 0.2)'
            }
          },
          axisTick: { show: false },
          splitLine: { show: false },
        },

如果是多条线传入的数据格式也要改变一下， data里面需要传入二维数组，可以map跑一下循环遍历就行了  类似散点图定位一样

   let data = {
         markData: 10,
         data: [
           [[12, 0.23], [14, 0.45]],
           [[12, 0.23], [14, 0.45]],
           [[12, 0.23], [14, 0.45]]
         ]
       }

markarea

区域位置的话比较好加，两边如果需要虚线还是需要markline画

markArea: {
            itemStyle: {
              color: 'rgba(232, 241, 248, 1)',
            },
            data: [[
              { xAxis: dt.leftLine},
              { xAxis: dt.rightLine }
            ]]
          }

加油加油