echarts折线图中,点击拐点数据事件
在折线图表的展示数据中,出现不同数据的点击事件会根据点击的数据生成新的表单(根据事件和当前点击拐点数据请求后端接口渲染新表单)
直接查了echarts的各项配置,发现内置配置是没有这项支持的。这里提供一个更简单的方案:
直接绑定监听图表事件,这样就可以直接获得到当前点击的值:
这种监听除了点击拐点外 如果有makline 虚线值 点击虚线值事件也会被监听:
chartInit() { // var myChart = echarts.init(this.$refs.echart1); var myChart = echarts.init(document.getElementById(this.id)); myChart.setOption({ xAxis: { type: "category", boundaryGap: false, data: [ "2022-03-01", "2022-03-15", "2022-03-31", "2022-04-01", "2022-04-15", ], }, yAxis: { type: "value", }, series: [ { data: [222, 932, 301, 934, 1290, 1330, 1320], type: "line", areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#1980e7", }, { offset: 1, color: "#fff", }, ]), }, // markPoint: { // data: [ // { type: 'max', name: 'Max' }, // { type: 'min', name: 'Min' } // ] // }, markLine: { data: [ { type: "average",// 平均值 如果yaxis设置会替代 yAxis: 1233,// 设置的真实阈值 lineStyle: { //警戒线的样式 ,虚实 颜色 color: "#FA3934", title:'eee' }, silent: true, //鼠标悬停事件 true没有,false有 }, ], symbol: "none", //去掉警戒线最后面的箭头 label: { position: "end", //将警示值放在哪个位置,三个值“start”,"middle","end" 开始 中点 结束 }, }, }, ], }); myChart.on('click', function (param) { console.log(param, param.data);//这里根据param填写你的跳转逻辑 }); },
就是这么简单
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)