当前位置：首页 > article >正文

【echarts】创建带有标记线和点击事件的折线图

article 2024/12/24 4:09:48

echars在线例子

option = {
  xAxis: {
    type: 'category',
    data: [20240101, 20240102, 20240103, 20240104, 20240105, 20240106, 20240107], // 日期数据
  },
  yAxis: {
    type: 'value', // 数值类型Y轴
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260], // 数据值
      type: 'line', // 折线图
      markLine: {
        symbol: 'none', // 不显示线的起始和结束符号
        data: [
          { xAxis: '20240101' }, // 在2024年1月1日的位置添加标记线
        ],
        lineStyle: {
          type: 'solid', // 实线
          color: 'red', // 红色
          width: 2, // 线宽度
        },
      },
    },
  ],
};

在上面的代码中，为折线图添加了一个红色标记线，位置设置在 20240101 对应的日期处。通过 markLine 配置项，可以在指定的 X 轴位置添加竖直的标记线。

图表显示与交互

// 设置图表
myChart.setOption(option);

// 添加点击事件监听
myChart.on('click', function (params) {
  // 判断是否点击了标记线（markLine）
  if (params.componentType === 'markLine') {
    console.log('点击的标记线对应的日期是:', params.data.xAxis); // 输出点击的日期
    alert(params.data.xAxis); // 弹窗显示日期
  }
});

为图表添加点击事件监听，能够识别用户点击了标记线的位置，并输出该日期。

在这里插入图片描述

使用 myChart.setOption(option) 设置图表的配置。
使用 myChart.on(‘click’, function (params) {…}) 监听用户的点击事件。当点击事件发生时，如果用户点击了标记线（params.componentType === ‘markLine’），则会弹出提示框显示该标记线对应的日期。

完整代码

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: [20240101, 20240102, 20240103, 20240104, 20240105, 20240106, 20240107]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      markLine: {
        symbol: 'none', // 不显示线的起始和结束符号
        data: [
          { xAxis: '20240101' } // 在 '20240101' 位置画竖线
        ],
        lineStyle: {
          type: 'solid',
          color: 'red',
          width: 2
        }
      }
    }
  ]
};

// 设置图表
myChart.setOption(option);

// 添加点击事件监听
myChart.on('click', function (params) {
  // 判断是否点击了标记线（markLine）
  if (params.componentType === 'markLine') {
    console.log('点击的标记线对应的日期是:', params);
    alert(params.data.xAxis);
  }
});

option && myChart.setOption(option);