echartsApi的运用

原创已于 2025-01-15 15:28:49 修改

· 468 阅读

8 ·

版权

文章标签：

#echarts #前端 #javascript

于 2024-01-02 12:13:45 首次发布

需求

为了实现立体效果series 里有三项。滑上数据项使series里三项数据全部变色。

解决

1、使用echarts API ：events和action。

       series: [
          {
            emphasis: {//highlight事件配置
              itemStyle: {
                color: "rgba(211, 64, 240, 1)",
                opacity: 1,
              },
            },
            itemStyle: {
              normal: {//正常配置
                color: function (params) {
                  var index = params.dataIndex;
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                  }

                  return colorList[index][0];
                },
              },
            },
            data: yData,
          },
          {
            emphasis: {
              itemStyle: {
                color: "rgba(211, 64, 240, 1)",
                opacity: 1,
              },
            },
      itemStyle: {
              normal: {
              },
            },
            data: yData,
          },
          {
            emphasis: {
              itemStyle: {
                color: "rgba(211, 64, 240, 1)",
                opacity: 1,
              },
            },
      itemStyle: {
              normal: {
              },
            },
            data: yData,
          },
        ], 

 myChart1.on("mouseover", function (params) {
        // 控制台打印数据的名称

        myChart1.dispatchAction({
          type: "highlight",
          // 用 index 或 id 或 name 来指定系列。
          // 可以使用数组指定多个系列。
          seriesIndex: [0, 1, 2],
          dataIndex: params.dataIndex,
        });
      });
      myChart1.on("mouseout", function (params) {
        // 控制台打印数据的名称

        myChart1.dispatchAction({
          type: "downplay",
          // 用 index 或 id 或 name 来指定系列。
          // 可以使用数组指定多个系列。
          seriesIndex: [0, 1, 2],
          dataIndex: params.dataIndex,
        });
      });

2、利用api设置option (思路不具体实现)

      var option = this.myChart1.getOption();
  
        option.series[0].data = [
          this.LoadAirUseAndReleaseStatics.yearReleaseRate,];

      this.myChart1.setOption(option);