关于echarts 绘画横向排行榜，自动向上滚动，切换数据时销毁重绘

应用场景：

在数据统计中，我们经常会使用echarts绘制横向的排行榜，当数据过多当前页显示不下时就会考虑使用自动滚动的方式保证每条数据都能得到展示。

实例效果：

 VUE代码实现

1、index.vue

   <div class="item-left-content-view">
        <item-title-view
          :imageUrl="require('@/assets/titleView/columnar.png')"
          itemTitle="办件量(业务类型)"
        >
          <div class="seventh-slot-view">
            <el-date-picker
              @change="
                $refs.eightLeft.GetSalesWaterOpen(
                  FOPERID,
                  chargeTypeData.leftDate
                )
              "
              format="yyyyMM"
              unlink-panels
              value-format="yyyyMM"
              :clearable="false"
              v-model="chargeTypeData.leftDate"
              type="monthrange"
              placeholder="月份区间"
            >
            </el-date-picker>
          </div>
        </item-title-view>
        <div class="item-conent-view">
          <eight-left ref="eightLeft"></eight-left>
        </div>
      </div>

  import eightLeft from "./components/eight/eightLeft.vue";
  components: {
   eightLeft,
  },

2 eightLeft.vue

<template>
  <div id="eightLeft" ref="eightLeft" _echarts_instance_ style="width: 100%; height: 100%" ></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "eightLeft",
  props: {},
  data() {
    return {
      value: [],
      timeOut: "",
      endVal: 7,
      startVal: 0,
      key: new Date().getTime(),
    };
  },
  watch: {},
  mounted() {},
  methods: {
    GetSalesWaterOpen(CompanyId = 0, month) {
      this.$api.indexHome
        .GetBussBillType({
          CompanyId: CompanyId,
          MonthStart: month[0],
          MonthEnd: month[1],
        })
        .then((res) => {
          // dome数据
          res.Results = [
            {
              FID: 29,
              FNAME: "表务申请",
              FCOUNT: 500,
            },
            {
              FID: 4005,
              FNAME: "用水人口数变更业务",
              FCOUNT: 30,
            },
            {
              FID: 4011,
              FNAME: "发票信息变更业务",
              FCOUNT: 5,
            },
            {
              FID: 4008,
              FNAME: "客户信息变更申请业务",
              FCOUNT: 21,
            },
            {
              FID: 4002,
              FNAME: "水表销户申请业务",
              FCOUNT: 499,
            },
            {
              FID: 26,
              FNAME: "用水档案变更单",
              FCOUNT: 64,
            },
            {
              FID: 6,
              FNAME: "档案变更单",
              FCOUNT: 94,
            },
            {
              FID: 1,
              FNAME: "公司报装单",
              FCOUNT: 14,
            },
            {
              FID: 4014,
              FNAME: "扣费信息变更业务",
              FCOUNT: 64,
            },
            {
              FID: 1201,
              FNAME: "用水人口变更单(添加人口)",
              FCOUNT: 41,
            },
            {
              FID: 5,
              FNAME: "过户申请单",
              FCOUNT: 842,
            },
            {
              FID: 2,
              FNAME: "用户报装单",
              FCOUNT: 14,
            },
            {
              FID: 94,
              FNAME: "用水性质变更单",
              FCOUNT: 64,
            },
            {
              FID: 4001,
              FNAME: "给水申请业务",
              FCOUNT: 22,
            },
            {
              FID: 4013,
              FNAME: "水表验表申请业务",
              FCOUNT: 4,
            },
            {
              FID: 4007,
              FNAME: "过户申请业务",
              FCOUNT: 390,
            },
            {
              FID: 4004,
              FNAME: "用水性质变更业务",
              FCOUNT: 13,
            },
          ];
          if (this.timeOut) {
            this.stop();
          }
          document
            .getElementById("eightLeft")
            .removeAttribute("_echarts_instance_");   // 移除重绘  防止切换数据后 动画错乱
          this.value = res.Results;
          this.onCreateMap();
        });
    },
    onCreateMap() {
      let that = this;
      var myChart = echarts.init(this.$refs["eightLeft"]);
      let colorList = ["#5A91FA"];
      let result = this.$common.sortData("FCOUNT", this.value);
      let option = {
        color: colorList,
        backgroundColor: "#fff",
        tooltip: {
          show: true,
          trigger: "item",
          padding: [8, 15],
          backgroundColor: "rgba(255, 255, 255,1)",
          borderColor: "#fff",
          textStyle: {
            color: "#333",
          },
        },
        legend: {
          show: false,
        },
        grid: {
          left: "180",
          right: "60",
          top: "5%",
          bottom: "5%",
        },
        xAxis: [
          {
            splitLine: {
              show: false,
            },
            type: "value",
            show: false,
          },
        ],
        yAxis: [
          {
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            type: "category",
            axisTick: {
              show: false,
            },
            inverse: true,
            data: result.map((item) => item.FNAME),
            axisLabel: {
              color: "#666666",
              fontSize: 12,
              margin: 10,
            },
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: 10, // 柱子宽度
            MaxSize: 0,
            showBackground: true,
            backgroundStyle: {
              color: "#F5F5F5",
              borderRadius: 6,
            },
            label: {
              show: true,
              position: "right",
            },
            itemStyle: {
              borderRadius: 8,
            },
            data: result.map((item, index) => {
              return {
                name: item.FNAME,
                value: item.FCOUNT,
                itemStyle: {
                  color: colorList[index],
                },
              };
            }),
          },
        ],

        dataZoom: [
          {
            yAxisIndex: [0],
            show: false, //是否显示滑动条，不影响使用
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: that.startVal, // 从头开始。
            endValue: that.endVal, // 一次性展示8个
            width: 6,
            borderColor: "transparent",
            fillerColor: "rgba(205,205,205,1)",
            zoomLock: true,
            showDataShadow: false, //是否显示数据阴影 默认auto
            backgroundColor: "#fff",
            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
            realtime: true, //是否实时更新
            filterMode: "filter",
            handleIcon: "circle",
            handleStyle: {
              color: "rgba(205,205,205,1)",
              borderColor: "rgba(205,205,205,1)",
            },
            handleSize: "80%",
            moveHandleSize: 0,
            maxValueSpan: 7,
            minValueSpan: 7,
            brushSelect: false, //刷选功能
          },
          {
            type: "inside",
            yAxisIndex: 0,
            zoomOnMouseWheel: false, //滚轮是否触发缩放
            moveOnMouseMove: true, //鼠标滚轮触发滚动
            moveOnMouseWheel: true,
          },
        ],
      };

      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      autoMove();
      document.getElementById("eightLeft").onmouseenter = () => {
        stop();
      };
      document.getElementById("eightLeft").onmouseleave = () => {
        autoMove();
      };

      // //停止滚动
      function stop() {
        clearInterval(that.timeOut);
      }
      function autoMove() {
        this.timeOut = setInterval(() => {
          if (option.dataZoom[0].endValue == result.length) {
            option.dataZoom[0].endValue = 7;
            option.dataZoom[0].startValue = 0;
          } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
          }
          myChart.setOption(option);
        }, 2000);
      }
    },
  },
};
</script>
<style lang="less" scoped></style>

3、common.js

// 排序 str 对哪个字段排序  data 排序的数据  返回排序后的数据
export function sortData(str, data, direction = "fall") {
  data.sort((prv, next) => {
    if (direction == "fall") {
      return next[str] - prv[str];
    } else {
      return prv[str] - next[str];
    }
  });
  return data;
}