echarts.apache.org/examples/zh/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeBYAULWAPAgliAzgFzLqaZgCeIApiQOQDGAhmDQObABOl9ANGXIATVsxIBtAEwAGSQBZpARiV9YM-Utmr1C5QGZts3dLmGNygKxnjANmuaA7AF0BGWAF9XmSnkIlUbhTUdLD0AG7MADYArjT8gp6CBDRcEDTEsOKCmAHkwqISihbS2nolavLaigAcqop6VrCKcg7aNtIu2eRUtAyRENBxXnmwALbMXADWADIDIbkjmASUowBGwJEM0DBDsAD0e7CAsHKAfGaAXJ6A_X6AIW6A7rGA05qAMSqAy36A-uaAZN6A78pdeSJgYpnfEZIbC-DL0HSaRT0DyqA6wQAU6qEIcoobBALLygDt_QDcroA1rwugMwnUCI36gwAylRIvMCd1ggwCBsIEJ4sTFowNtwGFwaMzhotMAB3JlgAAWJEkfJGiVZMK60sJrncAG50Og4YA-6IxgD-1QAWEehRpQAMIiiZgAB0yTAAHlwFBoAAKUCQGAAShVaDVh0A37aAAqVAJ0OgG_FQDRcoA3uUAi26AGhV9UaTVxzTB7Ux-oxJvxYAAzaLQRjOuD2kATZijAgu0huOGAEiVALWmgHozQBkKoHAGFygHALQAN0RdABD_4yms0GgEh_wQQdOwfOF4tm9mjEA7aBgAAqwQQ8EQ9G7Mzm9FLC0w7OgDKpZsiwHYicDVzbF0An9qAFL0roBT00A-OY1ohpgtcIsl90jKIpMCj9_jr8zBmrg-Cfgk6DuG6QA" rel="nofollow">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);
