关于Echarts点击折线图的不同地方获取相关信息的方法

我目前的项目中涉及到很多关于echarts图点击不同地方获取相关信息并跳转到不同组件的需求。

接下来我就总结一下，我目前遇到的一些需求和方法。

(1)一个折线图中，有4个要求。点击折线进入A页面、点击空白区进入B页面，点击图列保存图列选中情况、点击y轴名字切换单位。

• 点击折线进入A页面，并且A页面要显示当前点击折线的相关信息。(例如:折线点击的是情景1，那么进入到A页面显示情景1的相关信息)

myChart.on("click", function (param) {
console.log(param);   //获取折线的相关信息
    });

• 点击空白区域进入B页面，点击Y轴名字切换单位(例如:kg和t相互切换)

 

 myChart.getZr().on("click", function (params) {
      if (!params.target) {
        if(params.topTarget.style.text){
         //可改变单位
        }else{
          //进入B页面
        }
      }
    });

• 点击图例保存图例选中情况，当下次进入该页面时，显示选中图例结果

 myChart.on("legendselectchanged", function (obj) {
      var selected = obj.selected;
      localStorage.setItem("slegent", JSON.stringify(selected));//这里我采用的是通过保存到本地
    });

需要在legend中添加selected属性，来控制图例显示情况。

 legend: {
        icon: "rect",
        itemWidth: 10,
        itemHeight: 10, //修改icon图形大小
        textStyle: {
          fontSize: 16,
          color: "#000",
        },
        x: "center",
        y: "bottom",
        data: legendData,//图例
        selected: selectedLegent,//图例显示情况
      },

需要判断一下本地是否有保存图例的选中情况，初次进来没有就需要用legendData去生成一个selectedLegent，添加到legend中

 const slegent = localStorage.getItem("slegent");
      let obj = {};
      if (slegent) {
        selectedLegent = JSON.parse(slegent);
      } else {
        for (let i in legendData) {
          obj[legendData[i]] = true;
          // console.log('obj',obj);
          selectedLegent = obj;
        }
      }

注意：此处的legendData是我自己通过后端返回的数据生成的图例数组，你也要根据后端返回情况自己生成哦，如果确定图例的话，也可以在前端将图例数组写死。

• 还需要提醒一下，有时候你会发现明明只点击了一次，但是事件会发生很多次，就需要做一下事件重复的限制。

 myChart.off();
//或者
myChart.getZr().off()；

这两个函数只有自己看着使用了。有时候会因为加了这个函数而导致某个地方不能点击，就都试试吧。

(2)补充一个点击y轴或者x轴名字的事件

• 需要在yAxis中添加一个属性triggerEvent

yAxis: [
        {
          type: "value",
          name: unit ? "量(单位:万t)" : "量(单位:kg)",//这里也体现出单位怎么切换的哦!
          nameRotate: 90,
          nameLocation: "center",
          nameTextStyle: {
            fontSize: 16,
          },
           triggerEvent: true,
        },
      ],

添加了这个属性，就可以在myChart.on()中拿到y轴的信息。

 myChart.on("click", function (params) {
        if (params.componentType == "yAxis") {
         //可切换单位
        } else if (params.componentType == "series") {
         //跳转页面
      });

好了，折线图就到这里啦，有需要可以看看条形图哦 !

http://t.csdn.cn/tyC6P