echarts x,y轴数据太长自动滚动在vue中的实现方法

迈不过友情╰ 2023-01-20 06:54 467阅读 0赞

**最近在做大屏开发，需要实现数据滚动显示，以下是完整代码，数据来源于后台接口**

<template>
      <div class="EquStatisRight2" ref="EquStatisRight2"></div>
    </template>
    
    <script>
    import { initEchart } from "./index";
    export default {
      data() {
        return {
          chart: null,
          timer: null,
        };
      },
      props: {
        echartsData: {
          type: Array,
          default: [],
        },
      },
      watch: {
        echartsData: function (newValue, oldValue) {
          this.echartsData = newValue;
          this.initChart();
        },
      },
      mounted() {
        const { initChart } = this;
        initChart();
        window.addEventListener("resize", this.resizeHandler);
      },
      beforeDestroy() {
        // 清理工作 避免内存泄漏
        // 销毁监听事件
        window.removeEventListener("resize", this.resizeHandler);
        // 销毁 Echarts 实例
        if (this.chart) {
          this.chart.dispose();
        }
      },
      methods: {
        // Echarts 的 resize 方法
        resizeHandler() {
          this.chart && this.chart.resize();
        },
        initChart() {
          // 全局定义定时器，初始化时清除定时器
          if (this.timer) {
            clearInterval(this.timer);
          }
          initEchart(this.echartsData).then((chartsData) => {
            this.chart = this.$echarts.init(this.$refs.EquStatisRight2);
            let option = {
              //  color: ['#566ec6', '#91cb74', '#f8c859', '#ec6863', '#71bfe3', '#3ea06f', '#fd8553', '#9c61b3', '#ea7ac6', '#f1ad3e', '#97e74c', '#7e56e8', '#50efb5'],
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow",
                },
              },
              grid: {
                top: 30,
                left: "3%",
                right: "6%",
                bottom: 30,
                containLabel: true,
              },
              xAxis: {
                type: "value",
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  textStyle: {
                    color: "#fff",
                  },
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: "solid",
                    color: "#2a3e85",
                  },
                },
                boundaryGap: [0, 0.01],
              },
              yAxis: {
                type: "category",
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  textStyle: {
                    color: "#fff",
                  },
                },
    
                data: chartsData.xAxisData,
              },
              series: [
                {
                  type: "bar",
                  label: {
                    normal: {
                      show: true,
                      position: "right",
                    },
                  },
                  itemStyle: {
                    normal: {
                      // 定制显示（按顺序）
                      color: function (params) {
                        var colorList = [
                          "#0f8ff2",
                          "#0ac2de",
                          "#eed94c",
                          "#24b238",
                          "#0873e7",
                          "#3ea06f",
                          "#fd8553",
                          "#9c61b3",
                          "#ea7ac6",
                          "#f1ad3e",
                          "#97e74c",
                          "#7e56e8",
                          "#50efb5",
                        ];
                        return colorList[params.dataIndex];
                      },
                    },
                  },
                  data: chartsData.series,
                },
              ],
              dataZoom: [
                //滑动条
                {
                  yAxisIndex: 0, //这里是从X轴的0刻度开始
                  show: false, //是否显示滑动条，不影响使用
                  type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                  startValue: 0, // 从头开始。
                  endValue: 6, // 一次性展示6个。
                },
              ],
            };
            // 渲染图表
            this.chart.setOption(option);
            // 通过定时器的方式刷新，改变statrValue，endValue
            this.timer = setInterval(() => {
              // 每次向后滚动一个，最后一个从头开始。
              if (option.dataZoom[0].endValue == chartsData.series.length) {
                option.dataZoom[0].endValue = 6;
                option.dataZoom[0].startValue = 0;
              } else {
                option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
              }
              this.chart.setOption(option);
            }, 3000);
          });
        },
      },
    };
    </script>
    <style lang='scss' scoped>
    .EquStatisRight2 {
      width: 100%;
      display: flex;
      flex-direction: row;
      height: calc(100% - 30px);
    }
    </style>