Echarts 图表知识点

不同属性的点击事件获取

      this.chartsDom.on("click", "属性名（title、graphic等）", (params) => {
      params 可以获取到点击事件的具体内容以及参数值
      });

graphic设置中心文本

 // 中心文本
         graphic: [
         //可设置多个，silent: true表示不响应点击事件
           {
            //环形图中间添加可点击数字
             type: "text", //通过不同top值可以设置上下显示
            left: "center",
             top: "51%",
            style: {
               text: `${get_data.count}`,
               textAlign: "center",
              fill: "#0A75D7", //文字的颜色
              width: 30,
               height: 30,
              fontSize: 22,
               fontWeight: 500,
           },
          },
           {
             //环形图中间添加文字
             type: "text", //通过不同top值可以设置上下显示
             left: "center",
             top: "63%",
             // 表示不响应事件。
             silent: true,
             style: {
               text: "存在异常",
               textAlign: "center",
               fill: "#484848", //文字的颜色
        fontSize: 17,
               fontWeight: 500,
             },
          },
         ],

径向颜色

// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color：{
  type: 'radial',
  x: 0.5,
  y: 0.5,
  r: 0.5,
  colorStops: [{
      offset: 0, color: 'red' // 0% 处的颜色
  }, {
      offset: 1, color: 'blue' // 100% 处的颜色
  }],
  global: false // 缺省为 false
}

series的鼠标移入变大事件

 emphasis: {
              scale: true, //鼠标移入变大
              label: {
                show: false,
                fontSize: "20",
                fontWeight: "bold",
              },
            },

饼图高亮设置

 //设置默认选中高亮部分
        this.veryImportantChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 0,
        });
        //检测鼠标移入后
        this.veryImportantChart.on("mouseover", (e) => {
          if (e.dataIndex == 0) {
            return;
          } else {
            //当检测到鼠标悬停事件，取消默认选中高亮
            this.veryImportantChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: 0,
            });
          }
        });
        //检测鼠标移出后显示之前默认高亮的那块
        this.veryImportantChart.on("mouseout", () => {
          this.veryImportantChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: 0,
          });
        });

圆环图设置（属性单独设置）

   //反方向剩下部分的样式
      let placeHolderStyle = {
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        color: "rgba(0,0,0,0)",
        borderColor: "rgba(0,0,0,0)",
        borderWidth: 0,
      };
       let seriesData = [];//动态配置series
   _getSourceClassData.forEach((item, index) => {
        let _totle = (this.objSourceAnomalyClass.dataSourceTotal - item.count) / 10;
        seriesData.push({
          name: item.name,
          type: "pie",
          clockwise: true, //顺时加载
          emphasis: {
            scale: false, //鼠标移入变大
          },
          minAngle: 13,
          //80 - index * 15 + '%',  - index * 15 + '%'
          radius: [110 - index * 15, 94 - index * 16],
          // 饼图图形上的文本标签
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 3,
          },
          startAngle: 80,
          data: [
            {
              value: item.count,
              name: item.name,
            },
            {
              value: parseInt(_totle),
              name: "信源总量",
              itemStyle: placeHolderStyle,
              emphasis: {
                itemStyle: {
                  color: "#dedede",
                  borderColor: "#dedede",
                  borderWidth: 0,
                },
                disabled: true,
                scale: false
              },
              tooltip: {
                show: false
              }
            },
          ],
        });
      });
       let my_option = {
        backgroundColor: "#fff",
        color: ["#3986FE", "#F57F50", "#F9D237", "#35CACA", "#73E6BF "],
        legend: {
          top: "13%",
          x: "left",
          left: "1%",
          itemWidth: 0,
          itemHeight: 0,
          data: labelName,
          itemGap: 4,
          textStyle: {
            color: "black",
            align: "right",
            x: "right",
            textAlign: "right",
          },
          selectedMode: true,
          orient: "vertical",
        },
        // 无数据时占位用
        title: {
          show: _getSourceClassData.length === 0, // 判断有没有数据，没有则show为true
          textStyle: {
            color: "#ccc",
            fontSize: 20,
            fontWeight: 600,
          },
          text: "暂无数据",
          left: "center",
          top: "center",
        },
        tooltip: {
          trigger: "item",
        },
        series: seriesData,
      };