Echarts在线免费图表

 
            const pieData = [
   { name: "星期一", value: 3 },
   { name: "星期二", value: 1 },
   { name: "星期三", value: 4 },
   { name: "星期四", value: 1 },
   { name: "星期五", value: 5 },
   { name: "星期六", value: 9 },
   { name: "星期日", value: 2 },
]
const YData = pieData.map(item => item.value)
const sum = YData.reduce((item, index) => item + index, 0); // 求数据之和

var scale = 1;
// 自定义颜色
var rich = {
   white: {
      color: "#65FDFD",
      align: "center",
      fontSize: 20 * scale,
      // padding: [21, 0],
   },
   yellow: {
      color: "#ffc20e",
      fontSize: 20 * scale,
      padding: [5, 4],
      align: "center",
   },
   total: {
      color: "#ffc20e",
      fontSize: 18 * scale,
      align: "center",
   },
   blue: {
      color: "#49dff0",
      fontSize: 16 * scale,
      align: "center",
   },
};
option = {
   backgroundColor:"#012337",
   color: [
      "#ea66a6",
      "#65c294",
      "#dea32c",
      "#8552a1",
      "#00ae9d",
      "#ffe600",
      "#f36c21",
   ],
   title: {
      text: "总数",
      subtext: sum,
      textStyle: {
         color: "#65FDFD",
         fontSize: 32,
         // align: 'center'
      },
      subtextStyle: {
         fontSize: 36,
         color: "#ffc20e",
         fontWeight: "bold"
      },
      x: "center",
      y: "center",
   },
   grid: {
      bottom: 150,
      left: 100,
      right: "10%",
   },
   tooltip: {
      trigger: 'item'
   },
   series: [
      {
         name: '',
         type: 'pie',
         radius: ["35%", "75%"],
         center: ["50%", "50%"],
         data: pieData,
         avoidLabelOverlap: true, // 开启智能布局 (防止折线位置冲突)
         label: {
            normal: {
               show: true,
               // formatter: "{b}：{c}",
               formatter: function (param) {
                  const percent = ((param.value / sum) * 100).toFixed(2);
                  return (
                     "{white|" + param.name + "}{yellow|" + param.value + "}\n{blue|" + percent + "%}"
                  );
               },
               rich: rich,
            },
            emphasis: {
               show: true,
            },
         },
         // 控制图例的线
         labelLine: {
            normal: {
               show: true,
               length: 40,
               length2: 30,
            },
            emphasis: {
               show: true,
            },
         },
      },
      // 边框的设置
      {
         radius: ["35%", "42%"],
         center: ["50%", "50%"],
         type: "pie",
         label: {
            normal: {
               show: false,
            },
            emphasis: {
               show: false,
            },
         },
         labelLine: {
            normal: {
               show: false,
            },
            emphasis: {
               show: false,
            },
         },
         animation: false,
         tooltip: {
            show: false,
         },
         data: [
            {
               value: 1,
               itemStyle: {
                  color: "rgba(0,0,0,0.3)",
               },
            },
         ],
      },
      {
         name: "外边框",
         type: "pie",
         clockWise: false, //顺时加载
         hoverAnimation: false, //鼠标移入变大
         center: ["50%", "50%"],
         radius: ["80%", "80%"],
         label: {
            normal: {
               show: false,
            },
         },
         data: [
            {
               value: 9,
               name: "",
               itemStyle: {
                  normal: {
                     borderWidth: 3,
                     borderColor: "#65FDFE",
                  },
               },
            },
         ],
      },
   ]
};
// 其他各种图表一个原理
let index = 0;
// 全部都适用 pie、bar、line
setInterval(function () {
   // 数据的长度
   if (index >= option.series[0].data.length) {
      index = 0;
   }
   myChart.dispatchAction({
      type: "showTip", // 提示框
      seriesIndex: 0,
      dataIndex: index // 对第几个进行提示
   });
   index += 1;
}, 2000);