• 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);
        },
  • 相关阅读:
    减少注入元
    浅谈微服务基建的逻辑
    Linux系统Java环境安装配置
    ASP.NET Core 依赖注入
    C#并发编程实例讲解-概述(01)
    Linux系统从安装开始
    关于C#获取动态的时间差函数
    SQL Server 存储过程
    jQuery选择器大全(48个代码片段+21幅图演示)
    对齐方式
  • 原文地址:https://www.cnblogs.com/bwnnxxx123/p/15685816.html
Copyright © 2020-2023  润新知