Echarts在线免费图表

 
            var data = [
   {
      value: 1968, 
      name: "星期一",
   },
   {
      value: 568,
      name: "星期二",
   },
   {
      value: 1130,
      name: "星期三",
   },
   {
      value: 1469,
      name: "星期四",
   },
   {
      value: 998,
      name: "星期五",
   },
]
var total = 0
data.forEach((item) => {
   total += Number(item.value);
});
data.push({
   value: total,
   name: "",
   itemStyle: {
      normal: {
         color: "rgba(0,0,0,0)",
      },
   },
});

option = {
   backgroundColor: "#00265f",
   tooltip: {
      trigger: "item",
      formatter: function (params) {
         var str =
            params.name +
            "</br>" +
            "数量：" +
            params.value +
            "</br>" +
            "占比：" +
            ((params.data.value / total) * 100).toFixed(2) + "%";
         return str;
      },
   },

   legend: {
      top: "0",
      icon: "roundRect",
      textStyle: {
         color: "#fff",
         fontSize: 12,
      },
      itemWidth: 10,
      itemHeight: 10,
   },
   color: ["#5c7bd9", "#91cc75", "#fac858", "#ee6666", "#73c0de"],
   series: [
      {
         name: "",
         type: "pie",
         startAngle: -180,
         hoverAnimation: false,
         radius: ["50%", "95%"],
         center: ["50%", "95%"],
         data: data,
         label: {
            normal: {
               formatter: function (params) {
                  if (params.name) {
                     return (
                        params.data.name +
                        "(" +
                        ((params.data.value / total) * 100).toFixed(2) +
                        "%)"
                     );
                  }
               },
               color: "#fff",
            },
         },
         emphasis: {
            scale: true,
            scaleSize: 10,
         },
         labelLine: {
            normal: {
               length: 30,
               length2: 10,
               lineStyle: {
                  width: 1,
               },
            },
         },
      },
   ],
};