Echarts在线免费图表

 
              let Data = [
        {
          value: 46,
          name: "新兴产业片区",
        },
        {
          value: 32,
          name: "先进智造片区",
        },
        {
          value: 34,
          name: "综合产业片区",
        },
        {
          value: 38,
          name: "滴水湖核心片区",
        },
        {
          value: 57,
          name: "浦东国际机场片区",
        },
      ];
      let option = {
            backgroundColor: 'balck',
        color: ["#00b1f2", "#ff921d", "#7bed75", "#4df9ff", "#e8ff7f"],
        legend: {
          type: "plain",
          orient: "vertical",
          left: "60%",
          top: "center",
          align: "left",
          itemGap: 30,
          itemWidth: 20, // 设置宽度
          itemHeight: 20, // 设置高度
          icon: "circle",
          symbolKeepAspect: false,
          formatter: function (name) {
            let data = option.series[0].data;
            // console.log(data, 'data')
            let total = 0;
            let tarValue;
            for (let i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            let v = tarValue;
            //计算出百分比
            return `${name}  ${v} `;
            //name是名称，v是数值
          },
          textStyle: {
            color: "#fff",
            fontSize: 18,
          },
        },
        series: [
          {
            type: "pie",
            hoverAnimation: true,
            hoverOffset: 25,
            startAngle: 180, //起始角度
            clockwise: false, //是否顺时针
            radius: ["45%", "70%"],
            center: ["30%", "50%"],
            avoidLabelOverlap: false,
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
                formatter: ["{a|{d}%}"].join("\n"),
                rich: {
                  a: {
                    fontSize: 26,
                    lineHeight: 36,
                    color: "#05aaff",
                  },
                  b: {
                    color: "#a7a9c7",
                    fontSize: 18,
                    lineHeight: 24,
                    color: "#fff",
                  },
                },
              },
            },
            label: {
              show: false,
              position: "center",
              color: "rgba(13, 17, 29,0)",
            },
            labelLine: {
              show: false,
            },
            data: Data,
            zlevel: 30,
          },
        ],
      };

      // myChart.clear();
      // 设置实例参数
      // myChart.setOption(option);
      let index = 0; //默认选中第二个
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: index, //默认选中第二个
      });
      myChart.on("mouseover", function (e) {
        if (e.dataIndex != index) {
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index,
          });
        }
      });
      myChart.on("mouseout", function (e) {
        index = e.dataIndex;
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        });
      });