Echarts在线免费图表

 
            let colorList = ["#6d9de0", "#49d896", "#f5d03a", "#f5853a", "#f5503a"];
let chartData = [{ name: "机柜", value: 8848 },
{ name: "服务器", value: 4396 },
{ name: "路由器", value: 3690 },
{ name: "交换机", value: 2587 },
{ name: "风扇", value: 6668 }];
let pieSeries = [];
let lineYAxis = [];
let arrName = [];
let arrValue = [];
let sum = 0;
chartData.forEach((v, i) => {
   arrName.push(v.name);
   arrValue.push(v.value);
   sum = sum + v.value;
});

chartData.forEach((v, i) => {
   let chartnewData = chartData.slice(0, i);
   let newValue = chartnewData.reduce((a, b) => {
      return a + b.value;
   }, 0);
   v.startAngle = (newValue / sum) * 360;
   pieSeries.push({
      type: "pie",
      clockWise: false,
      hoverAnimation: false,
      radius: [91 - i * 15 + "%", 82 - i * 15 + "%"],
      center: ["38%", "50%"],
      label: { show: false },
      startAngle: v.startAngle,
      data: [
         { value: v.value, name: v.name },
         {
            value: sum - v.value,
            name: "",
            itemStyle: { color: "rgba(0,0,0,0)" },
         },
      ],
   });
   pieSeries.push({
      type: "pie",
      silent: true,
      z: 1,
      clockWise: false,
      hoverAnimation: false,
      radius: [91 - i * 15 + "%", 82 - i * 15 + "%"],
      center: ["38%", "50%"],
      label: { show: false },
      data: [
         { value: sum, itemStyle: { color: "#013561" } },
         { value: 0, name: "", itemStyle: { color: "red" } },
      ],
   });
   v.percent = ((v.value / sum) * 100).toFixed(0) + "%";
   lineYAxis.push({
      value: i,
      textStyle: {
         rich: {
            circle: {
               color: colorList[i],
               padding: [0, 5],
            },
         },
      },
   });
});
option = {
   backgroundColor: 'rgb(10,25,62)',
   color: colorList,
   // graphic: {
   //   elements: [
   //     {
   //       type: "image",
   //       z: 3,
   //       style: { width: 70, height: 72 },
   //       left: "36%",
   //       top: "center",
   //     },
   //   ],
   // },
   tooltip: { show: true },
   legend: {
      icon: "circle",
      orient: "vertical",
      data: ["机柜", "服务器", "路由器", "交换机", "风扇"],
      right: "13%",
      top: "12%",
      itemGap: 10,
      itemWidth: 10,
      itemHeight: 20,
      textStyle: {
         color: "#fff",
         fontSize: 60,
         rich: {
            a0: {
               color: colorList[0],
               align: "right",
               verticalAlign: "top",
               fontSize: 16,
               padding: [0, 0, 0, 40],
            },
            a1: {
               color: colorList[1],
               align: "right",
               verticalAlign: "top",
               fontSize: 16,
               padding: [0, 0, 0, 40],
            },
            a2: {
               color: colorList[2],
               align: "right",
               verticalAlign: "top",
               fontSize: 16,
               padding: [0, 0, 0, 40],
            },
            a3: {
               color: colorList[3],
               align: "right",
               verticalAlign: "top",
               fontSize: 16,
               padding: [0, 0, 0, 40],
            },
            a4: {
               color: colorList[4],
               align: "right",
               verticalAlign: "top",
               fontSize: 16,
               padding: [0, 0, 0, 40],
            },
            b: { color: "#fff", width: 60 },
         },
      },
      formatter: (name) => {
         if (chartData.length) {
            var target;
            var index;
            var percent;
            for (var i = 0, l = chartData.length; i < l; i++) {
               if (chartData[i].name == name) {
                  target = chartData[i].value;
                  percent = chartData[i].percent;
                  index = i < 6 ? i : 5;
               }
            }

            if (name.length > 7) {
               name = name.substr(0, 7) + "...";
            }
            return `{b|${name}}{a${index}|${percent}}`;
         }
      },
   },
   // grid: { top: "10%", bottom: "5%", left: "65%", containLabel: true },

   yAxis: [
      {
         type: "category",
         inverse: true,
         axisLine: { show: false },
         axisTick: { show: false },
         axisLabel: { show: false },
         data: lineYAxis,
      },
   ],
   xAxis: [{ show: false }],
   series: pieSeries,
};