echarts水平柱状图滚动

// 红色部分为滚动原理

// 柱状echarts

    zzEcharts() {

      if (this.timer) {

        clearInterval(this.timer);

      }

      if (this.echartmyChart) {

        this.echartmyChart.clear();

      }

      let chartDom = document.getElementById("zzEcharts");

      let myChart = echarts.init(chartDom);

      let MZdata = [2012, 1230, 3790, 2349, 1654, 2012, 1230, 3790, 2349,2012, 1230, 3790, 2349, 1654, 2012, 1230, 3790, 2349];

      let MZname = [

        "德州",

        "德城区",

        "陵城区",

        "禹城市",

        "乐陵市",

        "德州",

        "德城区",

        "陵城区",

        "禹城市",

        "德州",

        "德城区",

        "陵城区",

        "禹城市",

        "乐陵市",

        "德州",

        "德城区",

        "陵城区",

        "禹城市",

      ];

      let option = {

        tooltip: {

          trigger: "axis",

          axisPointer: {

            type: "shadow",

          },

          formatter: function (p) {

            let div = `

                    <div style="margin:10px;display:flex;justify-content: center;align-items: center;">

                     <div style="display:block;;width: 8px;height: 8px;border-radius: 50%;background-color: #0D3053;margin-right:8px;"></div> <div>${p[0].name} : ${p[0].value}</div>

                    </div>

                    `;

            return div;

          },

        },

        grid: {

          top: "top",

          left: "3%",

          right: "5%",

          bottom: "3%",

          containLabel: true,

        },

        dataZoom: [

          {

            yAxisIndex: 0, // 这里是从X轴的0刻度开始

            show: false, // 是否显示滑动条，不影响使用

            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件

            startValue: 0, // 从头开始。

            endValue: 9, // 一次性展示多少个。

          },

        ],

        xAxis: {

          show: false,

          type: "value",

          boundaryGap: [0, 0.1],

          axisLabel: {

            textStyle: {

              color: "#0D3053", //字体颜色

            },

          },

          splitLine: {

            //去掉网格线

            show: false,

          },

        },

        yAxis: [

          {

            inverse: true,

            type: "category",

            axisLabel: {

              textStyle: {

                color: "#0D3053", //字体颜色

              },

            },

            //设置轴线的属性

            axisLine: {

              show: false,

            },

            //取消刻度线

            axisTick: {

              show: false,

            },

            data: MZname,

          },

          {

            type: "category",

            axisTick: "none",

            axisLine: "none",

            show: true,

            axisLabel: {

              textStyle: {

                color: "#0D3053",

                fontSize: "14",

                // fontStyle:'italic'

              },

            },

            data: MZdata,

          },

        ],

        series: [

          {

            name: "",

            type: "bar",

            itemStyle: {

              normal: {

                barBorderRadius: 10,

                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [

                  {

                    offset: 0,

                    color: "rgba(41, 162, 245, 0.1)",

                  },

                  {

                    offset: 1,

                    color: "rgba(41, 162, 245, 0.8)",

                  },

                ]),

                label: {

                  show: true,

                  position: "right",

                  textStyle: {

                    fontSize: 14,

                    color: "#fff",

                  },

                },

              },

            },

            data: MZdata,

            label: {

              show: false,

            },

            barWidth: 10,

          },

          {

            z: 12,

            type: "pictorialBar",

            symbol:

              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==",

            symbolSize: [30, 30],

            symbolOffset: ["34%", 0],

            symbolPosition: "end",

            data: MZdata,

          },

        ],

      };

      option && myChart.setOption(option);

      // 通过定时器的方式刷新，改变statrValue，endValue

      this.timer = setInterval(() => {

      //每次向后滚动一个，最后一个从头开始。

        let arr = MZdata;

        if (option.dataZoom[0].endValue == arr.length) {

          option.dataZoom[0].endValue = 9; //等于上面定义的一次性展示多少个

          option.dataZoom[0].startValue = 0;

        } else {

          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;

          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;

        }

        option && myChart.setOption(option, true);

      }, 1500);

        // 监听定时器在页面销毁前清除

      this.$once("hook:beforeDestroy", () => {

        clearInterval(this.timer);

      });

      this.echartmyChart = myChart;

    },