Echarts在线免费图表

 
            const pieData = [
   {
      name: "楼宇负荷",
      value: Math.floor(Math.random() * 100 + 100),
   },
   {
      name: "微网",
      value: Math.floor(Math.random() * 100 + 100),
   },
   {
      name: "储能",
      value: Math.floor(Math.random() * 100 + 100),
   },
   {
      name: "灵活调节电源",
      value: Math.floor(Math.random() * 100 + 100),
   },
   {
      name: "综合能源",
      value: Math.floor(Math.random() * 100 + 100),
   },
];
const total = pieData.reduce((a, b) => {
   return a + b.value;
}, 0);
let seriesData = [];
pieData.forEach(r => {
   seriesData.push(r);
   seriesData.push({
      name: "",
      value: 15,
      tooltip: { show: false },
      itemStyle: {
         label: {
            show: false,
         },
         labelLine: {
            show: false,
         },
         color: "rgba(0, 0, 0, 0)",
         borderColor: "rgba(0, 0, 0, 0)",
         borderWidth: 0,
      },
   });
});
option = {
   color: ["#96B5FC", "#5F8CEF", "#F18A70", "#F4C594", "#E0E7FA"],
   backgroundColor: "#011d39",
   title: {
      text: `{a|${total}}{b| MW}`,
      textStyle: {
         rich: {
            a: {
               color: "#FFFFFF",
               fontSize: "32",
            },
            b: {
               fontSize: "16",
               color: "#FFFFFF",
            },
         },
      },
      x: "36%",
      y: "48%",
   },
   tooltip: {
      trigger: "item",
   },
   legend: {
      icon: "circle",
      orient: "horizontal",
      right: "10%",
      top: "30%",
      width: "0",
      textStyle: {
         color: "#E6F7FF",
      },
      data: pieData.map(r => r.name),
   },
   series: [
      {
         name: "交易品种收益",
         type: "pie",
         radius: ["50%", "55%"],
         center: ["40%", "50%"],
         avoidLabelOverlap: false,
         label: {
            position: "outside",
            color: "#E6F7FF",
            lineHeight: 18,
            formatter: params => {
               const { data } = params;
               return data.name ? `${data.name}\n${data.value}MW` : "";
            },
         },
         itemStyle: {
            borderColor: "transparent",
         },
         emphasis: {
            scaleSize: 10,
         },
         data: seriesData,
      },
      {
         name: "阴影圈",
         type: "pie",
         radius: ["0", "40%"],
         center: ["40%", "50%"],
         emphasis: {
            scale: false,
         },
         tooltip: {
            show: false,
         },
         itemStyle: {
            color: "rgba(204,225,255, 0.05)",
         },
         zlevel: 4,
         labelLine: {
            show: false,
         },
         data: [100],
      },
      {
         name: "阴影圈",
         type: "pie",
         radius: ["0", "30%"],
         center: ["40%", "50%"],
         emphasis: {
            scale: false,
         },
         tooltip: {
            show: false,
         },
         itemStyle: {
            color: "rgba(204,225,255, 0.07)",
         },
         zlevel: 4,
         labelLine: {
            show: false,
         },
         data: [100],
      },
   ],
};