echarts

   initEcharts() {
      let myChart = echarts.init(document.getElementById("partTwo"));
      //只让click事件触发一次
      myChart.off("click");
      let option = {
        backgroundColor: "transparent",
        color: [
          "#FF72A6",
          "#FF9502",
          "#FEEC02",
          "#506CEF",
          "#38A5EA ",
          "#ad36ff",
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            color: "#fff",
          },
          backgroundColor: "#000A3070",
          borderColor: "#000A3060",
        },
        legend: {
          data: this.projectDomainsList.map((v) => v.name),
          orient: "vertical",
          right: "0%",
          top: "15%",
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 20,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        series: [
          {
            name: "项目行业分布",
            type: "pie",
            clockwise: false,
            startAngle: 90,
            center: ["38%", "50%"],
            radius: ["45%", "65%"],
            hoverAnimation: false,
            label: {
              show: true,
              orient: "outside",
              formatter: "{a|{b}: {d}%}",
              rich: {
                a: {
                  color: "#fff",
                },
              },
              left: 10,
              top: 20,
              bottom: 20,
            },
            data: this.projectDomainsList.map((v) => {
              return { name: v.name, value: v.project };
            }),
          },
        ],
      };
      myChart.setOption(option);
      //点击饼图跳研发
      myChart.on("click", (params) => {
        this.visible = true;
        let serviceName = params.name;
        this.projectDomainsList.forEach((item) => {
          if (serviceName == item.name) {
            this.serviceType = item.id;
          }
        });
        this.getSreviceTypeList();
      });
      // // let names = ["制造流量", "轨道交通", "金融", "政府", "通信"];
      // let firstSelectName = "制造流量";
      // myChart.dispatchAction({
      //   type: "highlight",
      //   // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据
      //   name: firstSelectName,
      // });
      // let selectIndex = 1;
      // setInterval(() => {
      //   myChart.dispatchAction({
      //     type: "downplay",
      //     seriesIndex: 1,
      //   });
      //   myChart.dispatchAction({
      //     type: "highlight",
      //     // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据
      //     name: names[selectIndex],
      //   });
      //   selectIndex++;
      //   if (selectIndex >= names.length) {
      //     selectIndex = 0;
      //   }
      // }, 3000);
    },

posted on 2021-12-13 23:16  被窝暖暖嘻嘻嘻  阅读(68)  评论(0编辑  收藏  举报

导航