1. The goal:

Add a vertical line to the Echart polyline icon, and add specific SVG ICONS and data to the vertex position of the discount graph

2.

1) Make a line chart

The main thing is to specify that type in series is line

Series: [{name: 'sales' type:' the line 'data: [5, 20, 36, 10, 10, 20]}]Copy the code

2) Add vertical lines

Specifies a vertical line style

markLine: {
        itemStyle: {
          normal: {
            color: '#666666',
            lineStyle: {
              type: 'solid',
              width: 3
            }
          }
        },
        data: [
          [
            { xAxis: e.dataIndex, yAxis: 0 },
            { xAxis: e.dataIndex, yAxis: 40 },
          ]
        ]
      }
Copy the code

3) Add specific SVG ICONS

Add SVG to the line graph at the break point (same with images)

MarkPoint: {data: //yAxis: represents the vertical position of the icon on the y axis, the maximum value of the data array, and the height of the image // (greater than the maximum value because the highest column is slightly spaced from the icon) xAxis: e.dataIndex, yAxis: e.data+3, symbol: 'path://M 0 0 L -1 -1 L -1 -2 Z', silent: true, label: { normal: { formatter: + e.data, color: '#000000', fontSize: 14}}},]}Copy the code

3. Overall code and page display

1) Overall code

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title> -- introducing echarts. Js - > < script SRC = "https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" > < / script > < / head > < body > <! <div id="main" style="width: 600px; height:400px;" ></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementByid ('main'), 'ZZZ ', {renderer:' SVG '}); Var option = {title: {text: 'first ECharts instance'}, Tooltip: {}, Legend: {data: [' sales ']}, xAxis: {data: [" shirt "and" sweater ", "snow spins unlined upper garment", "pants", "high heels", "socks"]}, yAxis: {}, series: [{name: 'sales' type:' line 'data: [5, 20, 36, 10, 10, 20]}}; // Display the chart using the configuration items and data you just specified. myChart.setOption(option); myChart.on('click', e => { console.log('eeeeeeeeeeeeeeeeee', e) option.series[0].markLine = { itemStyle: { normal: { color: '#666666', lineStyle: { type: 'solid', width: 3 } } }, data: [ [ { xAxis: e.dataIndex, yAxis: 0 }, { xAxis: e.dataIndex, yAxis: 40 }, ] ] } option.series[0].markPoint = { data: //yAxis: represents the vertical position of the icon on the y axis, the maximum value of the data array, and the height of the image // (greater than the maximum value because the highest column is slightly spaced from the icon) xAxis: e.dataIndex, yAxis: e.data+3, symbol: 'path://M 0 0 L -1 -1 L -1 -2 Z', silent: true, label: { normal: { formatter: + e.ata, color: '#000000', fontSize: 14}}},]} mychart.setoption (option)}) </script> </body> </ HTML >Copy the code

2) Display as shown in figure:

Opening screen:

After clicking on the line chart fold, add the vertical line and the SVG icon: