ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【echarts】创建带有标记线和点击事件的折线图 [打印本页]
作者: 石小疯    时间: 2024-12-23 03:27
标题: 【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. });
复制代码
为图表添加点击事件监听，可以或许识别用户点击了标记线的位置，并输出该日期。


完整代码

  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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4