Echarts折线图markLine实现多条线标注

6,837 阅读1分钟

使用Echarts图中折线图的markLine方法

效果图

image.png

借用的echart例子模板( echarts.apache.org/examples/zh… ) 并在基础上修改,markLine实现的线可根据需求去修改样式,这里使用的是默认格式虚线

markLine: {
  data: [
    [
      {
        // 一条线的终点
        coord: ['周三',11],
        symbol: 'none'
      },
      {
        name:'新品期',
        // 起始点,根据x轴坐标自定义,可画斜线
        label: {
          position: 'start'
        },
        coord: ['周三', 0],
        symbol: 'none'
      }
    ],
    [      {        coord: ['周四',11],
        symbol: 'none'
      },
      {
        name:'测试期',
        label: {
          position: 'start'
        },
        coord: ['周四', 0],
        symbol: 'none'
      }
    ]
  ]
}