Echarts在线免费图表

 
             // 真实后端数据
      const annularList = [
        { value: 2700, name: "设备一" },
        { value: 3800, name: "设备二" },
        { value: 4400, name: "设备三" },
      ];

      // 颜色
      const colorList = {
        设备一: ["#4292FF", "#7DBAFF"],
        设备二: ["#207e8e", "#5ddeE6"],
        设备三: ["#FFB400", "#FFC900"],
      };

      // 组装数据
      const newAnnularList = annularList.map((item) => {
        return {
          ...item,
          itemStyle: {
            color: new echarts.graphic.RadialGradient(0, 0, 1, [
              {
                offset: 0,
                color: colorList[item.name][0],
              },
              {
                offset: 1,
                color: colorList[item.name][1],
              },
            ]),
          },
        };
      });

      // 配置项
      const option = {
         backgroundColor:"#fff",
        title: {
          text: "设备类型分布",
          left: "center", // 对齐方式居中
          top: "45%", // 距离顶部
          textStyle: {
            // 文字配置
            color: "#000", // 文字颜色
            fontSize: 15, // 字号
            align: "center", // 对齐方式
          },
        },
        tooltip: {
          show: true,
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          top: "bottom",
        },
        series: [
          {
            name: "设备类型分布",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: true,
              position: "outside",
              formatter: (params) => {
                if (params.name == "设备一") {
                  return "{a| " + params.value + "}\n{a| " + params.percent + "%}";
                }
                else if (params.name == "设备二") {
                  return "{b| " + params.value + "}\n{b| " + params.percent + "%}";
                }
                 else {
                  return "{c|" + params.value + "}\n{c| " + params.percent + "%}";
                }
              },
              rich: {
                a: {
                  color: "#4292FF",
                  align: "left",
                  padding: 4,
                },
                b: {
                  color: "#5DDEE6",
                  align: "left",
                  padding: 4,
                },
                c: {
                  color: "#FFC900",
                  align: "left",
                  padding: 4,
                },
          
            
              
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 30,
            },
            data: newAnnularList,
          },
        ],
      };