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填写你的跳转逻辑
           
        });
    },
复制代码

就是这么简单

 

posted @   少哨兵  阅读(4824)  评论(2编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示