Echarts关于折线图实现转折点标注

使用Echarts折线图进行折线拐点处出现连接线；

思路
1.使用markLine来增加标注线。
2.通过在每个点数据增加起点和终点进行展示。

效果图如下：

在option配置项中的series中使用markLine,将所需出现标注线的数据进行如下配置：

           [            {              // 一条线的终点              coord: ['周一', 10],//数据的[xAxis,XaxisValue]
              symbol: 'none' //标记类型：'circle','rect','roundRect','triangle', 'diamond', 'pin', 'arrow', 'none'
            },
            {
              // 起始点，根据x轴坐标自定义，可画斜线；需要垂直于X轴则coord默认0
              label: {
                position: 'start'
              },
              coord: ['周一', 0], 
              symbol: 'none'
            }
          ]

更多配置信息根据官网文档进行选择。【echarts.apache.org/zh/option.h…

项目中使用数据多为动态，根据需要做循环赋值即可。
效果图配置代码如下：

option = {
  title: {
    text: 'Temperature Change in the Coming Week'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  series: [
    {
      name: 'Highest',
      type: 'line',
      data: [10, 11, 13, 11, 12, 12, 9],
      label: {
        show: true,
        position: 'top'
      },
      markLine: {
        data: [
          [
            {
              // 一条线的终点
              coord: ['周一', 10],
              symbol: 'none'
            },
            {
              // 起始点，根据x轴坐标自定义，可画斜线
              label: {
                position: 'start'
              },
              coord: ['周一', 0],
              symbol: 'none'
            }
          ],
          [            {              // 一条线的终点              coord: ['周二', 11],
              symbol: 'none'
            },
            {
              // 起始点，根据x轴坐标自定义，可画斜线
              label: {
                position: 'start'
              },
              coord: ['周二', 0],
              symbol: 'none'
            }
          ],
          [            {              // 一条线的终点              coord: ['周三', 13],
              symbol: 'none'
            },
            {
              // 起始点，根据x轴坐标自定义，可画斜线
              label: {
                position: 'start'
              },
              coord: ['周三', 0],
              symbol: 'none'
            }
          ],
          [            {              coord: ['周四', 11],
              symbol: 'none'
            },
            {
              label: {
                position: 'start'
              },
              coord: ['周四', 0],
              symbol: 'none'
            }
          ],
          [            {              coord: ['周五', 12],
              symbol: 'none'
            },
            {
              label: {
                position: 'start'
              },
              coord: ['周五', 0],
              symbol: 'none'
            }
          ],
          [            {              coord: ['周六', 12],
              symbol: 'none'
            },
            {
              label: {
                position: 'start'
              },
              coord: ['周六', 0],
              symbol: 'none'
            }
          ],[            {              coord: ['周日', 9],
              symbol: 'none'
            },
            {
              label: {
                position: 'start'
              },
              coord: ['周日', 0],
              symbol: 'none'
            }
          ]
        ]
      }
    },
  ]
};