echarts可视化的那些事

以下存在一个问题：轮播过程会闪一下，目前定位到是变态UI让提示框加背景图造成的，暂时还没有好的解决方式（vue写法）

const data = [820, 932, 901, 934, 1290, 1330, 1320];
      let lineDom = document.getElementById("myLine");
      let myLine = this.$echarts.init(lineDom);
      let option;
      option = {
        xAxis: {
          type: "category",
          splitLine: {
            //是否需要开启分割线
            show: false
          },
          axisTick: {
            //是否需要开启刻度
            show: false
          },
          axisLine: {
            //轴线样式设置
            show: true, //是否显示坐标轴线
            lineStyle: {
              color: "#333"
            }
          },
          axisLabel: {
            //横坐标样式设置
            textStyle: {
              fontSize: 16,
              fontWeight: "bold",
              color: "blue",
              fontFamily: "normal"
            }
          },
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value",
          splitLine: {
            //是否开启分割线
            show: true,
            lineStyle: {
              color: ["pink"],
              width: 2,
              type: "dotted"
            }
          },
          axisTick: {
            //是否开启刻度线
            show: false
          },
          axisLine: {
            //是否显示坐标轴线
            show: true,
            lineStyle: {
              color: "blue"
            }
          },
          axisLabel: {
            interval: 0,
            formatter: `{value}`,
            textStyle: {
              fontSize: 16,
              fontWeight: "normal",
              color: "red",
              fontFamily: "normal"
            }
          }
        },
        tooltip: {
          //提示框样式及内容设置
          type: "axis",
          axisPointer: {
            animation: true,
            animationDuration: 1000
          },
          formatter(params) {
            return `<div style="background:url(${require("../assets/logo.png")}) no-repeat center center;padding:10px">PH:&nbsp&nbsp${
              params.data
            }</br>${params.name}</div>`;
          },
          padding: 0,
          borderWidth: 0,
          borderColor: "red",
          textStyle: {
            fontSize: 16,
            fontWeight: "bold",
            color: "blue",
            fontFamily: "siyuan",
            align: "left"
          }
        },
        legend: {
          show: true,
          top: "5%",
          left: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal",
            color: "pink",
            fontFamily: "normal"
          }
        },
        series: [
          {
            data: data,
            type: "line",
            areaStyle: {}
          }
        ]
      };
      option && myLine.setOption(option);
      let index = 0; //播放所在下标
      let mTime;
      let openTime = function() {
        mTime = setInterval(function() {
          myLine.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: index
          });
          index++;
          if (index > data.length) {
            index = 0;
          }
          return () => {
            mTime.clearInterval();
          };
        }, 2000);
      };
      //如果没增加移入移出清除，会出现提示框轮播会闪的情况
      lineDom.onmouseover = () => {
        clearInterval(mTime);
      };
      lineDom.onmouseout = () => {
        openTime();
      };
      //window.onload = function() {//页面加载完运行
        //clearInterval(mTime);
        //openTime();
      //};
      openTime();

这块需要注意：如果需要轮播展示提示框，那么option中需要配置tooltip，不会这还有人不知道吧～啊～

主要用到echarts上提供的dispatchAction，点击查看