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

echars在线例子

1. option = {
2.   xAxis: {
3.     type: 'category',
4.     data: [20240101, 20240102, 20240103, 20240104, 20240105, 20240106, 20240107], // 日期数据
5.   },
6.   yAxis: {
7.     type: 'value', // 数值类型Y轴
8.   },
9.   series: [
10.     {
11.       data: [150, 230, 224, 218, 135, 147, 260], // 数据值
12.       type: 'line', // 折线图
13.       markLine: {
14.         symbol: 'none', // 不显示线的起始和结束符号
15.         data: [
16.           { xAxis: '20240101' }, // 在2024年1月1日的位置添加标记线
17.         ],
18.         lineStyle: {
19.           type: 'solid', // 实线
20.           color: 'red', // 红色
21.           width: 2, // 线宽度
22.         },
23.       },
24.     },
25.   ],
26. };

复制代码

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

1. // 设置图表
2. myChart.setOption(option);
4. // 添加点击事件监听
5. myChart.on('click', function (params) {
6.   // 判断是否点击了标记线（markLine）
7.   if (params.componentType === 'markLine') {
8.     console.log('点击的标记线对应的日期是:', params.data.xAxis); // 输出点击的日期
9.     alert(params.data.xAxis); // 弹窗显示日期
10.   }
11. });

复制代码

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

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

完整代码

1. import * as echarts from 'echarts';
3. var chartDom = document.getElementById('main');
4. var myChart = echarts.init(chartDom);
5. var option;
7. option = {
8.   xAxis: {
9.     type: 'category',
10.     data: [20240101, 20240102, 20240103, 20240104, 20240105, 20240106, 20240107]
11.   },
12.   yAxis: {
13.     type: 'value'
14.   },
15.   series: [
16.     {
17.       data: [150, 230, 224, 218, 135, 147, 260],
18.       type: 'line',
19.       markLine: {
20.         symbol: 'none', // 不显示线的起始和结束符号
21.         data: [
22.           { xAxis: '20240101' } // 在 '20240101' 位置画竖线
23.         ],
24.         lineStyle: {
25.           type: 'solid',
26.           color: 'red',
27.           width: 2
28.         }
29.       }
30.     }
31.   ]
32. };
34. // 设置图表
35. myChart.setOption(option);
37. // 添加点击事件监听
38. myChart.on('click', function (params) {
39.   // 判断是否点击了标记线（markLine）
40.   if (params.componentType === 'markLine') {
41.     console.log('点击的标记线对应的日期是:', params);
42.     alert(params.data.xAxis);
43.   }
44. });
46. option && myChart.setOption(option);

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。