echarts 柱状图配置及首页数据滚动效果

echarts柱状图相关代码如下：  

 productDataStats(eleId, chartType, caseData, keyArr) {
      echarts.init(document.getElementById(eleId)).dispose()
      var myChart = echarts.init(document.getElementById(eleId))
      var datasetArr = []
      var tempData = {
        dimensions: ['chartCategory', 'chartCount', 'chartKey'],
        source: caseData
      }
      datasetArr.push(tempData)

      for (var i = 0; i < keyArr.length; i++) {
        var transf = {
          transform: {
            type: 'filter',
            config: { dimension: 'chartKey', value: keyArr[i] }
          }
        }
        datasetArr.push(transf)
      }

      var seriesArr = []
      for (var j = 0; j < keyArr.length; j++) {
        var index = j + 1
        var series = {
          name: keyArr[j],
          type: chartType,
          stack: 'x',
          label: {
            show: false,
            position: 'inside'
          },
          encode: {
            // 将 "chartCategory" 列映射到 X 轴。
            x: 'chartCategory',
            // 将 "chartCount" 列映射到 Y 轴。
            y: 'chartCount',
            label: ['chartCount']
          },
          datasetIndex: index
        }
        seriesArr.push(series)
      }
      var option = {
        legend: {},
        tooltip: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '12%',
          containLabel: true
        },
        dataZoom: [
          {
            show: true, //控制滚动条显示隐藏
            type: 'slider',
            xAxisIndex: [0],
            realtime: true, //拖动滚动条时是否动态的更新图表数据
            height: 5, //滚动条高度
            start: 0, //滚动条开始位置（共100等份）
            end: caseData.length > 25 ? 50 : this.endValue, //滚动条结束位置
            bottom: 10,
            zoomLock: true //控制面板是否进行缩放
          }
        ],
        dataset: datasetArr,
        xAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            interval: 0, // 坐标轴刻度标签的显示间隔
            rotate: 40,
            formatter: function (value, index) {
              if (value.length > 7) {
                return value.substr(0, 7) + '...'
              } else {
                return value
              }
            }
          }
        },
        yAxis: { name: '案件量（件）' },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: seriesArr
      }

      myChart.setOption(option)
    },

实现的效果如下：

首页滚动效果：

vue 安装 vue-count-to

npm install vue-count-to

所用页面引入包

import CountTo from 'vue-count-to'

使用方式及参数说明：

引用代码：

<CountTo
  :startVal='startVal'
  :endVal='endVal'
  :duration='duration'
/>

参数说明：

效果如下：

tip：当autoplay：true时，它将在startVal或endVal更改时自动启动