Echarts在线免费图表

 
            var activeIndex = "";
var { echData = [], colorList, } = {
   colorList: [
      "#73DDFF",
      "#73ACFF",
      "#FDD56A",
      "#FDB36A",
      "#FD866A",
      "#9E87FF",
      "#58D5FF",
      "#3cffc4",
   ]
}
var list = [{ count: 1, jhztz: 100, ssjd: "济南" }, { count: 1, jhztz: 100, ssjd: "青岛" }, { count: 1, jhztz: 100, ssjd: "烟台" }, { count: 1, jhztz: 100, ssjd: "日照" }, { count: 1, jhztz: 100, ssjd: "潍坊" },];
list.forEach((item, index) => {
   echData.push({
      value: item.count,
      value2: item.jhztz,
      name: item.ssjd,
   });
});

option = {
   //你的代码
   tooltip: {
      trigger: "item",
      formatter: function (params) {
         if (activeIndex !== "") {
            // 取消高亮指定的数据图形
            // myChart.dispatchAction({
            //    type: "downplay",
            //    seriesIndex: 0,
            //    dataIndex: activeIndex,
            // });
         }
         return `${params.marker} ${params.name}</br>数量：${params.data.value}个</br>投资：${params.data.value2}亿`;
      },
   },
   series: [
      {
         type: "pie",
         radius: ["0%", "52%"],
         avoidLabelOverlap: true,
         emphasis: {
            label: {
               show: true,
               fontWeight: "bold",
            },
         },
         itemStyle: {
            normal: {
               color: function (params) {
                  return colorList[params.dataIndex];
               },
            },
         },
         label: {
            show: true,
            // position: 'outside',
            formatter: "{b} \n{c}个 ({d}%)",
            position: "outer",
            margin: 10,
            fontSize: 12,
         },
         labelLine: {
            normal: {
               length: 30,
               length2: 5,
               lineStyle: {
                  width: 1,
               },
            },
         },
         data: echData,
      },
   ],
};


var timeInter = setInterval(() => {
   changeEchCheck(activeIndex);
}, 3000);

function changeEchCheck() {
   if (activeIndex !== "") {
      myChart.dispatchAction({
         type: "hideTip",
         seriesIndex: 0,
         dataIndex: activeIndex,
      });
      // 取消高亮指定的数据图形
      myChart.dispatchAction({
         type: "downplay",
         seriesIndex: 0,
         dataIndex: activeIndex,
      });
      activeIndex++;
      if (activeIndex > list.length - 1) activeIndex = 0;
   } else {
      activeIndex = 0;
   }

   // 显示提示框
   myChart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: activeIndex,
   });
   myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: activeIndex,
   });

}