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 @ 2022-03-17 16:59  少哨兵  阅读(4561)  评论(2编辑  收藏  举报