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

就是这么简单

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM