Echarts在线免费图表

 
            let data = [
   {
      value: 0.4, //百分比
      name: "满意",
   },
   {
      value: 0.1,
      name: "一般般",
   },
   {
      value: 0.5,
      name: "不满意",
   },
];
let color =  [ '#5CD0FF', '#89FFE3', '#FFBB9A', '#FF7C48', '#C88CFF'];
let colorData = [];
// 数据处理
data.map((item, index) => {
   colorData[index] = [
      index ? item.value + colorData[index - 1][0] : item.value,
      color[index],
   ];
});
option = {
   backgroundColor:'rgba(39,46,74)',
   color,
   title: {
      zlevel: 0,
      text: "居民",
      subtext: "满意度",
      top: "43%",
      left: "50%",
      textAlign: "center",
      textStyle: {
         color: "#fff",
         fontSize: 60,
      },
      subtextStyle: {
         fontSize: 60,
         color: "#fff",
      },
   },
   legend: {
      top: "15%",
      left: "5%",
      icon: "rect",
      orient: "vertical",
      selectedMode: false,
      itemGap: 30,
      formatter: (name) => {
         const item = data.filter((item) => item.name === name)[0];
         return "{title|" + name + "}\n{value|" + item.value * 100 + "}{title|%}";
      },
      textStyle: {
         rich: {
         title: {
            color: "#fff",
            fontSize: 20,
            padding: [3, 0],
         },
         value: {
            fontSize: 22,
            lineHeight: 20,
            color: "#fff",
         },
         },
      },
      data: data,
   },
   series: [
      {
         // 内环
         type: "pie",
         radius: ["55%", "57%"],
         center: ["50%", "50%"],
         hoverAnimation: false,
         label: {
         normal: {
            show: false,
         },
         emphasis: {
            show: false,
         },
         },
         zlevel: 1,
         labelLine: {
         show: false,
         },
         data: data,
      },
      {
         // 锯齿部分
         type: "gauge",
         radius: "55%",
         clockwise: true,
         startAngle: "90",
         center: ["50%", "50%"],
         endAngle: "-269.9999",
         splitNumber: 12,
         axisLine: {
            show: true,
            lineStyle: {
               width: 0,
               color: colorData, // 锯齿数据写在这里
            },
         },
         axisTick: {
            distance: -20,
            length: 10,
            splitNumber: 15,
            lineStyle: {
               width: 2,
               color: "auto",
            },
         },
         splitLine: {
            show: false,
         },
         axisLabel: {
            show: false,
         },
         anchor: {
            show: false,
         },
         title: {
            show: false,
         },
         detail: {
            show: false,
         },
      },
  ],
};