柱状图数据轮巡滚动加载其中5个

微信截图_20231114120416.png 微信截图_20231114120514.png

引入使用

import Right3 from './components/Right3'
<Right3 :id="'Right3'" :datas="right3Data"></Right3>

组件代码

<template>
  <div :id="id" class="echarts1"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  // startVal 初始值 endVal 最终值 title 标签值
  props: {
    datas: {
      type: [Array, Object],
      default: null
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      Time1: null,
      myChart: '',
      datasCopy: '',
      xData: [],
      yData: []
    }
  },
  computed: {},
  watch: {
    // 这是监听json值变化
    datas: {
      // json为监听参数名
      handler: function (val, oldVal) {
        // 不能用箭头函数
        console.log(val)
        this.echartsFun()
        this.datasCopy = val
        let i = 4

        clearInterval(this.Time1)
        this.xData = []
        this.xData = []
        this.Time1 = setInterval(() => {
          if (i == this.datasCopy.yData.length) {
            i = 4
          }
          this.xData = this.getFiveElements(this.datasCopy.xData, i, this.xData);
          this.yData = this.getFiveElements(this.datasCopy.yData, i, this.yData);
          console.log(this.xData);
          console.log(this.yData);
          this.myChart.setOption({
            xAxis: {
              data: this.xData
            },
            series: [{
              data: this.yData
            }]
          })
          i++
        }, 2000);
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.Time1)
  },
  methods: {
    /** 返回数组的五个元素，追加源数组的新的i数据，并删除之前的第一个 */
    getFiveElements(arr, i, data) {
      // 如果数组长度为0，直接返回myArray的前五个元素
      if (i === 4) {
        data = arr.slice(0, 5);
        return data
      } else {
        // 如果源数据仍有可用元素，追加源数据的第一个元素并删除结果的第一个元素
        data.push(arr[i]);
        data.shift();
      }
      return data;
    },
    echartsFun() {
      // console.log(JSON.parse(JSON.stringify(this.datasCopy)))
      // let y = JSON.parse(JSON.stringify(this.datasCopy)).splice(0, 5)
      // console.log(y)

      const t = this
      echarts.init(document.getElementById(this.id)).dispose() // 一定要摧毁
      this.myChart = echarts.init(document.getElementById(this.id))
      this.myChart.clear()
      const option = {
        tooltip: {
          trigger: 'axis',
          confine: true, // 悬停内容超出画布用这个
          backgroundColor: 'rgba(0,0,0,0.5)',
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          },
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          },
          formatter(params) {
            const index = params[0].dataIndex // 下标
            return (
              t.xData[index] +
              '<br/>' +
              '数量：' +
              t.yData[index]
            )
          }
        },
        grid: {
          top: '15%',
          left: '6%',
          right: '6%',
          bottom: '5%',
          containLabel: true // 显示范围包含坐标刻度
        },
        xAxis: [
          {
            type: 'category',
            showMaxLabel: true, // X轴显示开头和最后一个信息
            data: this.xData,
            axisLabel: {
              // rotate: 50,
              textStyle: {
                fontSize: 12,
                color: '#C7DFF8'
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#063374',
                width: 1,
                type: 'solid'
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            max: function (value) {
              if (value.max === 0) {
                return value.max + 10
              }
            },
            minInterval: 1,
            type: 'value',
            axisTick: {
              show: false
            },
            axisLabel: {
              // rotate: 50,
              textStyle: {
                fontSize: 12,
                color: '#C7DFF8'
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#00c7ff',
                width: 1,
                type: 'solid'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            data: this.yData,
            barWidth: 20, // 柱子宽度
            barGap: 1, // 柱子之间间距
            label: {
              show: true,
              position: 'top',
              valueAnimation: true,
              color: '#fff' // 明确设置文字颜色
            },
            itemStyle: {
              normal: {
                color: (val) => {
                  // if (
                  //   this.datasCopy.index &&
                  //   val.dataIndex === this.datasCopy.index[0]
                  // ) {
                  //   return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  //     {
                  //       offset: 0,
                  //       color: '#5B3117'
                  //     },
                  //     {
                  //       offset: 1,
                  //       color: '#F6D1BC'
                  //     }
                  //   ])
                  // } else {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#172F5B'
                    },
                    {
                      offset: 1,
                      color: '#BCDCF6'
                    }
                  ])
                  // }
                }
              }
            }
          }
        ]
      }
      this.myChart.setOption(option, true) // true无数据时更新试图
      // this.myChart.on('click', (param) => {
      //   if (document.exitFullscreen) {
      //     document.exitFullscreen()
      //   } else if (document.mozCancelFullScreen) {
      //     document.mozCancelFullScreen()
      //   } else if (document.webkitExitFullscreen) {
      //     document.webkitExitFullscreen()
      //   } else if (document.msExitFullscreen) {
      //     document.msExitFullscreen()
      //   }
      //   let arr = param.name.split('-')
      //   if (arr.length == 1) {
      //     if (this.$store.state.code.roles == '') {
      //       this.$router.push({ path: '/clue', query: { quxian: param.name } })
      //     }
      //   } else {
      //     let dataIndex = param.dataIndex
      //     console.log(this.datasCopy.xData0[dataIndex])
      //     this.$router.push({
      //       path: '/clue',
      //       query: { time: this.datasCopy.xData0[dataIndex] }
      //     })
      //   }
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
.echarts1 {
  width: 100%;
  height: 100%;
}
</style>

···