vue+echarts实现柱状图自动轮播功能

vue+echarts实现柱状图自动轮播功能

<template>
  <div class="bar-echrats" :style="{ width: '500px', height: '400px' }">
    <div id="barEchrats" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import dataArray from "../../../utils/data.js";
// data.js 数据就是 ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
export default {
  data() {
    return {
      fanFun: null,
      time: null,
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      this.setIntervalAuploy();
    },
    myChartCurrentIndex(myChart) {
    // 核心代码
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: 0,
      });
      // 高亮当前图形
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });
      // 显示 tooltip
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: 0,
      });
    },
    setIntervalAuploy() {
      let myChart = echarts.init(document.getElementById("barEchrats"));
      let that = this;
      let x = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
      let num = 6;
      let arr = x.slice(0, num); // 页面一次性只显示个     
       let app = {
        currentIndex: -1,
      };
      this.time = setInterval(function () {
        that.myChartCurrentIndex(myChart);
        app.currentIndex++;
        // 这是一值都显示个 不能下小于等于5个否则页面会有好几次显示5个
        if (arr.length <= 6) { 
        arr = x.concat(dataArray).slice(app.currentIndex, num++);
        }
        that.setOptionRnder(myChart, arr);
      }, 1000);
      that.setOptionRnder(myChart, arr);
      myChart.on("mouseover", function (params) {
        clearInterval(that.time);
        that.myChartCurrentIndex(myChart);
      });
      myChart.on("mouseout", function (params) {
        clearInterval(that.time);
        that.time = setInterval(function () {
          that.myChartCurrentIndex(myChart);
          app.currentIndex++;
          if (arr.length <= 6) {
            arr = x.concat(dataArray).slice(app.currentIndex, num++);
          }
          that.setOptionRnder(myChart, arr);
        }, 1000);
      });
    },
    setOptionRnder(myChart, arr) {
      this.fanFun= [
        {
          name: "vvvvvvvv",
          type: "bar",
          barWidth: "15%",
          stack: "total",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: "#666",
                },
              ]),
              // barBorderRadius: 11,
            },
          },
          data: [140, 180, 215, 320, 396, 420, 140, 180, 140, 180, 215, 320],
        },
        {
          name: "aaaaaaaaa",
          type: "bar",
          barWidth: "15%",
          stack: "total",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#983A3A",
                },
                {
                  offset: 1,
                  color: "#ff00ff",
                },
              ]),
            },
          },
          data: [140, 180, 215, 320, 396, 420, 140, 180, 140, 180, 215, 320],
        },
        {
          name: "bbbbbbbbbbb",
          type: "bar",
          barWidth: "15%",
          stack: "total",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#FF69B4",
                },
                {
                  offset: 1,
                  color: "#BA55D3",
                },
              ]),
            },
          },
          data: [140, 180, 215, 320, 396, 420, 140, 180, 140, 180, 215, 320],
        },
        {
          name: "ccccccccc",
          type: "bar",
          barWidth: "15%",
          stack: "total", // 将多个柱子合成一个柱子
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#0000FF",
                },
                {
                  offset: 1,
                  color: "#B0E0E6",
                },
              ]),
            },
          },
          data: [140, 180, 215, 320, 396, 420, 140, 180, 140, 180, 215, 320],
        },
      ];
      let options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "14%",
          top: "16%",
          containLabel: true,
        },
        legend: {//显示标题
          data: ["vvvvvvvv", "aaaaaaaaa", "bbbbbbbbbbb", "ccccccccc"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#000",
          },
          itemWidth: 12,
          itemHeight: 10,
          // itemGap: 35
        },
        xAxis: {
          type: "category",
          data: arr,
          nameGap: 50, // 坐标轴名称与轴线之间的距离
          position: "bottom", // x轴的位置
          offset: 0, // x轴相对于默认位置的偏移
          axisLine: {
            lineStyle: {
              color: "#000",
              width: 0.3,
              type: "solid",
            },
          },
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#000",
              width: 0.3,
              type: "solid",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {},
        },
        series: this.fanFun,
      };
      myChart.setOption(options);
      window.onresize = myChart.resize;
    },
  },
};
</script>
<style lang="less" scoped>
.bar-echrats {
  height: 90%;
}
</style>