Echarts在线免费图表

 
            let information = {
   barColor: [
      "#3421a4",
      "#922020",
      "#a4226a",
      "#af3b14",
      "#70980c",
      "#0d8888",
      "#115a9f",
      "#6f1dc0",
   ],
   pieDatas: [
      {
         value: 10,
         name: "保障服务管理1科",
      },
      {
         value: 15,
         name: "保障服务管理2科",
      },
      {
         value: 25,
         name: "保障服务管理3科",
      },
      {
         value: 35,
         name: "保障服务管理4科",
      },
      {
         value: 50,
         name: "保障服务管理5科",
      },
      {
         value: 60,
         name: "解放东路8号集中办公点",
      },
      {
         value: 80,
         name: "军休所食堂",
      },
      {
         value: 100,
         name: "财政局食堂",
      },
   ],
   // 显示位置定位
   position: {
      x: "30%",
      y: "50%",
   },
};
let series = [];
// 扇形半径，间距
let baseRadius = 4,
   barWidth = 4;
// 总数
let sumValue = 0;
// 计算总数
information.pieDatas.map((item) => {
   sumValue += item.value;
});
information.pieDatas.map((item, i) => {
   series.push(
      {
         type: "pie",
         clockwise: false, //顺时加载
         emphasis: {
            scale: false,
         },
         radius: [
            baseRadius + i * barWidth + "%",
            baseRadius + (i + 1) * barWidth + "%",
         ],
         center: [information.position.x, information.position.y],
         label: {
            show: false,
         },
         itemStyle: {
            label: {
               show: false,
            },
            labelLine: {
               show: false,
            },
            borderWidth: 5,
         },
         data: [
            {
               value: item.value,
               name: item.name,
               itemStyle: {
                  color: information.barColor[i],
               },
            },
            {
               value: sumValue - item.value,
               name: "",
               itemStyle: {
                  color: "transparent",
               },
               tooltip: {
                  show: false,
               },
               emphasis: {
                  scale: false,
               },
            },
         ],
      },
      {
         name: "blank",
         type: "pie",
         silent: true,
         z: 0,
         clockwise: false, //顺时加载
         emphasis: {
            scale: false, //鼠标移入变大
         },
         radius: [
            baseRadius + i * barWidth + "%",
            baseRadius + (i + 1) * barWidth + "%",
         ],
         center: [information.position.x, information.position.y],
         label: {
            show: false,
         },
         itemStyle: {
            color: function (params) {
               if (i % 2 == 0) {
                  return "rgba(18,63,115,0.3)";
               } else {
                  return "rgba(18,63,115,0.6";
               }
            },
            label: {
               show: false,
            },
            labelLine: {
               show: false,
            },
            borderWidth: 5,
         },
         data: [
            {
               value: 1,
               tooltip: {
                  show: false,
               },
               hoverAnimation: false,
            },
         ],
      }
   );
   if (i == 0) {
      // 加内环
      series.unshift({
         // 内环
         type: "pie",
         radius: ["0%", baseRadius + i * barWidth + "%"],
         center: [information.position.x, information.position.y],
         silent: true, //取消高亮
         data: [100],
         itemStyle: {
            color: "rgba(18, 63, 115,.6)",
         },
         label: {
            show: false,
         },
      });
   } else if (i == information.pieDatas.length - 1) {
      // 加外环
      series.push({
         // 外环
         type: "pie",
         silent: true, //取消高亮
         radius: [
            baseRadius + (i + 2) * barWidth + "%",
            baseRadius + (i + 2) * barWidth + 0.5 + "%",
         ],
         center: [information.position.x, information.position.y],
         data: [100],
         itemStyle: {
            color: "rgba(18, 63, 115, 1)",
         },
         label: {
            show: false,
         },
         z: 0,
      });
   }
});
let option = {
   title: {
      text: "2024-06",
      textStyle: {
         fontSize: 32,
         color: "#b4e4ff",
      },
      right: 30,
      top: 55,
   },
   tooltip: {
      show: true,
      trigger: "item",
      backgroundColor: "rgba(9,40,84,0.8)",
      borderColor: "rgba(9,40,84,0.8)",
      textStyle: {
         fontSize: 20,
         color: "#fff",
      },
      formatter: function (params) {
         return (
            '<span style="margin-right: 5px; border-radius: 50%; display: inline-block; width:14px; height: 14px; vertical-align: middle; background-color: ' +
            params.color +
            ';"></span>' +
            params.name +
            "&nbsp;&nbsp;<span style='font-weight:bold'>" +
            params.value +
            "</span>"
         );
      },
   },
   legend: {
      show: true,
      left: "60%",
      top: "center",
      icon: "rect",
      width: 100,
      itemWidth: 16,
      itemHeight: 16,
      itemGap: 10,
      textStyle: {
         fontSize: 20,
         color: "#b4e4ff",
         height: 18,
         width: 430, // 文字总宽度
         rich: {
            rightStyle: {
               // 右侧样式
               align: "right",
               fontSize: 20,
            },
            a: {
               verticalAlign: "middle",
            },
         },
      },
      formatter: (name) => {
         var datas = information.pieDatas;
         let valueIndex = datas.map((item) => item.name).indexOf(name);
         return name + "{rightStyle|" + datas[valueIndex].value + "}";
      },
   },
   series: series,
};