echarts表格数据轮播展示

https://www.cnblogs.com/qt-fei/p/15741196.html

1. 数据量少且固定，利用数组的shift 和 push方法模拟轮播效果

<template>
  <div class="home">
    <div id="chart" class="box"></div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      timer: null,
    }
  },
  mounted() {
    this.barChart()
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    barChart() {
      let mychart = this.$echarts.init(document.getElementById('chart'))
      console.log(mychart, '----')
      // 控制显示几个柱子
      const [startValue, endValue] = [0, 3]
      // 数据
      const data = [
        { name: 'Mon', vaule: 120 },
        { name: 'Tue', vaule: 200 },
        { name: 'Wed', vaule: 150 },
        { name: 'Thu', vaule: 80 },
        { name: 'Fri', vaule: 40 },
        { name: 'Sat', vaule: 110 },
        { name: 'Sun', vaule: 120 },
      ]
      const xAxisData = data.map((item) => item.name)
      const seriesData = data.map((item) => item.vaule)

      const option = {
        title: [
          {
            text: ' 数据统计',
            left: '3%',
            textStyle: {
              fontSize: 30,
              color: '#333',
              height: 40,
              width: 40,
              lineHeight: 40,
            },
          },
        ],
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        // 控制显示几个柱子
        dataZoom: {
          show: false,
          startValue,
          endValue,
        },
        yAxis: {
          type: 'value',
        },
        series: {
          data: seriesData,
          type: 'line',
        },
      }
      mychart.setOption(option)

      // 使用定时器
      this.timer = setInterval(() => {
        const item1 = xAxisData.shift()
        xAxisData.push(item1)
        const item2 = seriesData.shift()
        seriesData.push(item2)
        mychart.setOption(option)
      }, 2000)
    },
  },
}
</script>

<style lang="scss" scoped>
.home {
  .box {
    height: 500px;
    border: 1px solid red;
  }
}
</style>

2. 数据量大且一页不能全部展示，使用分页轮播

<template>
  <div class="test" ref="barchart"></div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      xData: [
        '新海电厂',
        '射阳电厂',
        '淮阴电厂',
        '协联能源',
        '苏晋塔山',
        'xx1',
        'xx2',
        'xx3',
        'xx4',
      ],
      y1Data: [320, 332, 301, 334, 390, 230, 433, 134, 234],
      y2Data: [220, 182, 191, 234, 290, 244, 235, 334, 234],
    }
  },
  mounted() {
    this.initChart()
    this.updateChart()

    window.addEventListener('resize', this.adaptChart)

    // 在也买你加载完成的时候，主动进行屏幕的适配
    this.adaptChart()
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
    // 在组件销毁的时候，需要取消监听
    window.removeEventListener('resize', this.adaptChart)
  },
  computed: {
    totalPage() {
      return this.y1Data.length % 5 == 0
        ? this.y1Data.length / 5
        : parseInt(this.y1Data.length / 5) + 1
    },
  },
  methods: {
    updateChart() {
      let start = (this.currentPage - 1) * 5
      let end = this.currentPage * 5
      let x = this.xData.slice(start, end)
      let y = this.y1Data.slice(start, end)
      let y2 = this.y2Data.slice(start, end)

      let option = {
        xAxis: {
          data: x,
        },
        series: [
          {
            data: y,
          },
          {
            data: y2,
          },
        ],
      }
      this.myChart.setOption(option)
    },
    startInterval() {
      this.timer = setInterval(() => {
        if (this.currentPage >= this.totalPage) {
          this.currentPage = 1
        } else {
          this.currentPage++
        }
        this.updateChart()
      }, 1000)
    },
    initChart() {
      this.myChart = this.$echarts.init(this.$refs.barchart)
      this.option = {
        color: ['#00fff6', '#006699', '#4cabce', '#e5323e'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        label: {
          show: true,
          formatter: '{a}:{b}',
        },
        legend: {
          textStyle: {
            //图例文字的样式
            color: '#dbdbdb',
          },
          data: ['实际发电', '同期发电'],
        },
        calculable: true,
        xAxis: [
          {
            name: '电厂',
            type: 'category',
            axisTick: { show: false },
          },
        ],
        yAxis: [
          {
            name: '亿KWH',
            type: 'value',
            axisLine: { show: true },
          },
        ],
        series: [
          {
            name: '实际发电',
            type: 'bar',
            barGap: 0,
          },
          {
            name: '同期发电',
            type: 'bar',
          },
        ],
      }
      this.myChart.setOption(this.option)
      // 开启轮播
   	  this.startInterval()

      // 鼠标移入
      this.myChart.on('mouseover', () => {
        clearInterval(this.timer)
      })

      // 鼠标移出
      this.myChart.on('mouseout', () => {
        this.startInterval()
      })
    },
    // 屏幕分辨率适配
    adaptChart() {
      let titleFontSize = (this.$refs.barchart.offsetWidth / 100) * 3.6
      let adaptOption = {
        legend: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
      }
      this.myChart.setOption(adaptOption)
      //  手动调用图表的resize方法，才可以产生效果
      this.myChart.resize()
    },
  },
}
</script>

<style lang="scss" scoped>
.test {
  height: 100%;
}
</style>