Echarts在线免费图表

 
            // 需下载插件使用
// var myChart = echarts.init(document.querySelector(".echarts"));
let tootipTimer1 = "",
   option = {
      backgroundColor: '#081736',
      tooltip: {
         trigger: "axis",
         backgroundColor: "rgba(52, 57, 67, 0.9)",
         borderColor: "rgba(52, 57, 67)", //设置边框颜色
         axisPointer: {
            type: "shadow",
         },
         textStyle: {
            color: "#fff",
            fontSize: 24,
         },
      },
      grid: {
         top: 60,
         left: 140,
         right: 20,
         bottom: 30,
      },
      xAxis: {
         type: "category",
         data: ["10-28", "10-29", "10-30", "10-31", "11-01", "11-02"],
         color: "#64e7ff",

         axisLabel: {
            show: true,
            textStyle: {
               color: "#fff",
               fontSize: 24,
            },
         },
      },
      yAxis: {
         name: "单位",
         nameTextStyle: {
            color: "#fff",
            fontSize: 24,
         },
         type: "value",
         axisLabel: {
            show: true,
            textStyle: {
               color: "#fff",
               fontSize: 24,
            },
            formatter: function (value) {
               var txt = [];
               if (value >= 1000) {
                  txt.push(value / 10000 + "万");
               } else {
                  txt.push(value);
               }
               return txt;
            },
         },
      },
      series: [
         {
            itemStyle: {
               color: "#64e7ff",
            },
            label: {
               normal: {
                  show: true, //是否显示
                  position: "top", //文字位置
                  formatter: "{c}", //c后面加单位
                  color: "#ffffff",
                  fontSize: 24,
               },
            },
            barWidth: 40,
            data: [2036, 8113, 3591, 7895, 19782, 1830],
            type: "bar",
         },
      ],
   };
// myChart.clear();
// myChart.setOption(option);
// tootipTimer1 && tootipTimer1.clearLoop(); // tootipTimer 在data里定义
// tootipTimer1 = 0;
// tootipTimer1 = autoHover(myChart, option, 6, 3000);


//第二种轮播方式
var loopIndex = 0;
setInterval(function () {
   if (loopIndex > 3) {
      loopIndex = 0;
   }
   myChart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: loopIndex
   });
   if (option.series[0].data[loopIndex] === "") {
      myChart.dispatchAction({
         type: "showTip",
         seriesIndex: 2,
         dataIndex: loopIndex
      })
   }
   loopIndex++;
}, 2000);