【echarts】创建带有标记线和点击事件的折线图
echars在线例子https://i-blog.csdnimg.cn/direct/08bdad32d74d456197d2e763dc93d03d.png
option = {
xAxis: {
type: 'category',
data: , // 日期数据
},
yAxis: {
type: 'value', // 数值类型Y轴
},
series: [
{
data: , // 数据值
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); // 弹窗显示日期
}
});
为图表添加点击事件监听，可以或许识别用户点击了标记线的位置，并输出该日期。
https://i-blog.csdnimg.cn/direct/0542286eeb1b4f1283f20a50faaa5ff9.png
[*]使用 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:
},
yAxis: {
type: 'value'
},
series: [
{
data: ,
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);
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]