echarts的markLine 图表标线使用

---

预期效果

官方介绍

官网介绍

案例1

官网案例1

案例2

官方案例传送门

案例3

官方案例3

样式调整

去掉上面的箭头

 markLine: {
          symbol: 'none', //去掉上面的箭头
          lineStyle: {
            type: 'dashed'
          },

去掉下面的圆点

markLine: {
          symbol: 'none', 
          lineStyle: {
            type: 'dashed'
          },
          data: [
            {
              name: 'X 轴值为 100 的竖直线',
              xAxis: '16:05',
              symbol: 'none',  // 去掉下面的圆点

文字标签“事件开始”

markLine: {
          symbol: 'none',
          lineStyle: {
            type: 'dashed'
          },
          data: [
            {
              name: 'X 轴值为 100 的竖直线',
              xAxis: '16:05',
              symbol: 'none', 
              label: {  // 文字标签
                // show: false
                formatter: '事件开始',
                fontSize: '16px',
                fontFamily: 'Alibaba-PuHuiTi',
                backgroundColor: '#004277',
                color: '#0091FF',
                // position: 'middle',
                distance: [10, -30], // 设置标签文字的样式
                width: 70,
                height: 22
              }

实现结果

完整代码

 const option = {
    grid: {
      top: '30px',
      bottom: '10px',
      left: '10px',
      right: '10px',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      //   top: '20',
      right: 'center',
      data: ['流量', '车速'],
      textStyle: {
        color: '#9DD7FF',
        fontSize: 14
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: true, // 坐标轴两边留白
      data: ['16:00', '16:05', '16:10', '16:15', '16:20', '16:25', '16:30'],
      axisLabel: {
        interval: 0,
        //	margin:15,
        textStyle: {
          color: '#9DD7FF',
          fontSize: 14
        }
      },

      axisTick: {
        show: false
      }
    },
    yAxis: [
      {
        name: '流量',
        type: 'value',
        min: 0, // 最小值
        max: max_Y1.value, // 最大值
        position: 'left',
        splitNumber: 5,
        interval: max_Y1.value / 5, // 强制设置坐标轴分割间隔度(取本Y轴的最大值 max / 分割段数 splitNumber )
        axisLabel: {
          textStyle: {
            color: '#9DD7FF',
            fontSize: 14
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#2E4867'
            // type: 'dashed'
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#FFF'
          }
        },
        axisTick: {
          show: false
        }
      },
      {
        name: '车速',
        type: 'value',
        position: 'right',
        splitNumber: 5,
        min: 0, // 最小值
        max: max_Y2.value, // 最大值
        interval: max_Y2.value / 5, // 强制设置坐标轴分割间隔度(取本Y轴的最大值 max / 分割段数 splitNumber )

        axisLabel: {
          show: true,
          textStyle: {
            color: '#9DD7FF',
            fontSize: 14
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#2E4867',
            type: 'dashed'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#FFFFFF'
          }
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '流量',
        type: 'line',
        smooth: true,
        yAxisIndex: 0,
        symbolSize: 5,
        markLine: {
          symbol: 'none', // 去掉上面的箭头

          data: [
            {
              xAxis: '16:05',
              symbol: 'none', // 去掉下面的圆点
              lineStyle: {
                type: 'dashed',
                color: '#0091FF'
              },
              label: {
                // show: false
                formatter: '事件开始',
                fontSize: '16px',
                fontFamily: 'Alibaba-PuHuiTi',
                backgroundColor: '#004277',
                color: '#0091FF',
                // position: 'middle',
                distance: [10, -30], // 设置标签文字的样式
                width: 70,
                height: 22
              }
            },
            {
              xAxis: '16:25',
              symbol: 'none', // 去掉下面的圆点
              label: {
                // show: false
                lineStyle: {
                  type: 'dashed',
                  color: '#00FF03'
                },
                formatter: '事件结束',
                fontSize: '16px',
                fontFamily: 'Alibaba-PuHuiTi',
                backgroundColor: '#004277',
                color: '#00FF03',
                // position: 'middle',
                distance: [10, -15], // 设置标签文字的样式
                width: 70,
                height: 22
              }
            }
          ]
        },
        itemStyle: {
          normal: {
            color: '#00ECFC',
            lineStyle: {
              color: '#00ECFC',
              width: 2
            }
          }
        },
        data: state.flowList
      },
      {
        name: '车速',
        type: 'line',
        smooth: true,
        yAxisIndex: 1,
        symbolSize: 5,
        itemStyle: {
          normal: {
            color: '#fff',
            lineStyle: {
              color: '#FFC900',
              width: 2
            }
          }
        },

        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff'
          }
          //   formatter: function (value) {
          //     return value + '%'
          //   }
        },
        data: state.speedList
      }
    ]
  }