echarts折线图添加单击事件，添加竖直标注线和svg图标-一一网

1.目标：

在echart折线图标中添加一个竖线，同时在折现图顶点位置添加特定的svg图标和数据

2.知识点：

1）做折线图

主要是要指定series中的type为line

series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
      }]
复制代码

2) 添加竖线

指定竖线样式

markLine: {
        itemStyle: {
          normal: {
            color: '#666666',
            lineStyle: {
              type: 'solid',
              width: 3
            }
          }
        },
        data: [
          [
            { xAxis: e.dataIndex, yAxis: 0 },
            { xAxis: e.dataIndex, yAxis: 40 },
          ]
        ]
      }
复制代码

3）添加特定svg图标

在折线图折点位置添加svg(图片也是一样）

markPoint：{
        data: [
          {
            //xAxis :代表图标在x轴横向的位置，数值是data数组中的位置
            //yAxis：代表图标在y轴纵向的位置，data数组的最大值 ,图片放置高度
            //（大于最大值的原因是让最高的柱子与图标有点间距）
            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
              }
            }
          },
        ]
      }
复制代码

3 整体代码和页面展示

1）整体代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>第一个 ECharts 实例</title>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), 'zzz', { renderer: 'svg' });

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '第一个 ECharts 实例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    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: [
          {
            //xAxis :代表图标在x轴横向的位置，数值是data数组中的位置
            //yAxis：代表图标在y轴纵向的位置，data数组的最大值 ,图片放置高度
            //（大于最大值的原因是让最高的柱子与图标有点间距）
            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
              }
            }
          },
        ]

      }
      myChart.setOption(option)
    })
  </script>
</body>

</html>
复制代码