【echarts大屏】横向柱状图翻页轮询，让数据动起来！

news2024/9/26 3:31:17

想要打造震撼人心的数据可视化大屏？那么不妨尝试一下【echarts大屏】横向柱状图翻页轮询效果！通过这种方式，可以让你的数据图表生动起来，吸引用户的注意力。

在这里插入图片描述

✨ 接下来，我将为你介绍如何实现【echarts大屏】横向柱状图翻页轮询的效果。

1️⃣ 准备工作：
首先，你需要引入ECharts库，并创建一个容器元素，用于展示图表。

2️⃣ 数据准备：
根据你的需求，准备好要展示的数据。可以是实时的数据、动态变化的数据等。

3️⃣ 配置图表：
使用ECharts提供的API，配置横向柱状图的样式、坐标轴等，以及设置翻页动画效果。

4️⃣ 轮询效果实现：
通过定时器或者Vue/React等框架的数据变更触发机制，实现图表的翻页效果。可以通过改变图表的数据源或者图表的显示状态来实现轮询效果。

5️⃣ 无限循环展示：
如果想要实现无限循环的效果，可以在最后一页或者最开始一页时，切换到另一端的数据，从而实现无缝切换。

组件使用：

<div class="workload-ranking">
       <div class="workload-ranking-hand">
          <span class="publicIcon icon6"></span>
            当前班次作业量排名
      </div>
      <div class="workload-ranking-body">
          <Source :dataZoomEndValue="5"></Source>
      </div>
</div>

dataZoomEndValue说明:数据最大展示条数

vue组件完整代码：

<template>
  <div id="sou" class="sou" style="width: 100%;height: 100%" />
</template>

<script>
// 例如：import 《组件名称》 from '《组件路径》';
import * as echarts from "echarts";

export default {
  props: ["dataZoomEndValue"],
  name: "Source",
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      yAxisList: "",
      seriesList: "",
      seriesList2: "",
      ListScroll: null
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getdate();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.getSource();
  },
  beforeDestroy() {
    clearInterval(this.ListScroll);
  },
  // 方法集合
  methods: {
    getdate() {
      axios
        .get("/logistics/bulletinBoard/driverWorkloadShift/exception")
        .then(response => {
          if (response.data.status == 200) {
            let yAxisList = [];
            response.data.result.xData.forEach(item => {
              yAxisList.push(item.substr(0, item.indexOf(":")));
            });
            // const yAxisList = response.data.result.xData;
            const seriesList = response.data.result.yAxis[0].data;
            this.getSource(yAxisList, seriesList);
          }
        });
    },
    // 图表数据
    getSource(yAxisList, seriesList) {
      var myChart = echarts.init(document.getElementById("sou"));
      var dataZoomEndValue = this.dataZoomEndValue;

      const option = this.generateChartOption(yAxisList, seriesList);
      var [newYAxisList, newSeriesList] = this.groupDataByZoomValue(
        yAxisList,
        seriesList,
        dataZoomEndValue
      );

      // 首次渲染
      const YList = newYAxisList[0];
      const SList = newSeriesList[0];
      yAxisList.splice(0, yAxisList.length, ...YList);
      seriesList.splice(0, seriesList.length, ...SList);
      myChart.setOption(option);
      console.log(dataZoomEndValue, yAxisList);

      if (newYAxisList.length > 1 && newSeriesList.length > 1) {
        let indexNumber = 0;
        // 开始轮询翻页
        this.ListScroll = setInterval(() => {
          indexNumber = (indexNumber + 1) % newYAxisList.length;
          const YList = newYAxisList[indexNumber];
          const SList = newSeriesList[indexNumber];
          yAxisList.splice(0, yAxisList.length, ...YList);
          seriesList.splice(0, seriesList.length, ...SList);
          myChart.clear();
          myChart.setOption(this.generateChartOption(yAxisList, seriesList));
        }, 15000);
      }

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    generateChartOption(yAxisList, seriesList) {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          show: true,
          top: "3%",
          textStyle: {
            color: "#999"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          splitLine: {
            show: true,
            lineStyle: {
              color: "#666"
            }
          },
          axisLabel: {
            show: false
          },
          show: false
        },
        yAxis: {
          type: "category",
          data: yAxisList
        },
        series: [
          {
            name: "工作量（次）",
            type: "bar",
            data: seriesList,
            itemStyle: {
              color: "#458ef4"
            },
            label: {
              color: "rgba(255, 255, 255, 1)",
              show: true,
              position: "right",
              formatter: params => {
                var value = params.value;
                return value + "次";
              }
            }
          }
        ]
      };
    },
    groupDataByZoomValue(yAxisList, seriesList, zoomValue) {
      const newYAxisList = [];
      const newSeriesList = [];

      for (let i = seriesList.length; i > 0; i -= zoomValue) {
        const startIndex = Math.max(0, i - zoomValue);
        const yAxisSlice = yAxisList.slice(startIndex, i);
        const seriesSlice = seriesList.slice(startIndex, i);

        // 检查子数组长度是否小于zoomValue，若是，则进行填充
        if (yAxisSlice.length < zoomValue) {
          const yAxisFill = Array(zoomValue - yAxisSlice.length).fill("");
          yAxisSlice.unshift(...yAxisFill);
        }
        if (seriesSlice.length < zoomValue) {
          const seriesFill = Array(zoomValue - seriesSlice.length).fill("");
          seriesSlice.unshift(...seriesFill);
        }

        newYAxisList.unshift(yAxisSlice);
        newSeriesList.unshift(seriesSlice);
      }

      // 颠倒顺序
      newYAxisList.reverse();
      newSeriesList.reverse();
      console.log(newYAxisList, newSeriesList);
      return [newYAxisList, newSeriesList];
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>