前言：echart沒有滾動條概念，有配置選項類似滾動條，通過手段模擬滾動條效果....省略很多字（難）
dataZoom配置官網(wǎng)鏈接：https://echarts.apache.org/zh/option.html#dataZoom

// 定義數(shù)據(jù)dataZoom相關(guān)
data() {
    return {
      MyEcharts: '', //echarts實例
      objdata: {},
      titleFontSize: 12,
      txtFontSize: 10,
      dataZoomEnd:0,//計算可視寬度（dataZoom)
      dataZoomNum:4//定義可視項目個數(shù)（dataZoom)
    }
  },

methods: {
    drawBar() {
      let _this = this
//重點1：計算可視視圖所占比例，這里this.dataZoomNum設(shè)置了顯示4個在X軸上，
//比如X軸數(shù)據(jù)一共有8個（只顯示前面4個）100/8*4=50（100/X軸數(shù)據(jù)總個數(shù)*自定義顯示個數(shù)）
      this.dataZoomEnd=Math.floor(100/_this.bardatas.seriesData.length)*_this.dataZoomNum
      window.addEventListener('resize', function() {
        let cavansWid = document.getElementById(_this.id).clientWidth
        let windowWid = document.documentElement.getBoundingClientRect().width
        // 判斷全屏放大時候需要顯示所有，所以設(shè)置this.dataZoomEnd = 100
        if (cavansWid == windowWid) {
          _this.dataZoomEnd = 100
          _this.refreshFn()
        } else {//判斷縮回小屏幕
          _this.dataZoomEnd = Math.floor(100/_this.bardatas.seriesData.length)*_this.dataZoomNum
          _this.refreshFn()
        }
      }) //當窗口變化時隨瀏覽器大小而改變
      _this.refreshFn()
    },
    refreshFn() {
      let _this = this
      _this.MyEcharts = _this.$echarts.init(document.getElementById(_this.id))
      _this.MyEcharts.clear() //適用于大數(shù)據(jù)量的切換時圖表繪制錯誤,先清空在重繪
      _this.MyEcharts.resize()
      _this.objdata = {
        backgroundColor: 'rgba(7,24,105,.8)',
        title: {
          text: _this.title,
          textStyle: {
            align: 'left',
            color: '#fff',
            fontSize: _this.titleFontSize,
            fontWeight: 600
          },
          top: '3%',
          bottom: '10%',
          left: '2%'
        },
       ......
      }
//重點2 設(shè)置滾動條的樣式
      let dataZoom = {
        start: 0, //默認為0
        end: _this.dataZoomEnd, //  默認為100（重點）
        type: 'slider',
        show: true,
        borderColor: 'transparent',
        borderCap: 'round',
        xAxisIndex: [0],
        height: 6, //組件高度
        left: 20, //左邊的距離
        right: 20, //右邊的距離
        bottom: 4, //右邊的距離
        fillerColor: 'rgba(27,90,169,1)',
        handleIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z',// 畫一個圓形
        handleSize: '100%',
        handleStyle: {
          color: 'rgba(27,90,169,1)',
          borderWidth: 0
        },
        backgroundColor: 'rgba(37, 46, 100, 0.8)', //兩邊未選中的滑動條區(qū)域的顏色
        showDataShadow: false, //是否顯示數(shù)據(jù)陰影 默認auto
        showDetail: false, //即拖拽時候是否顯示詳細數(shù)值信息 默認true
        filterMode: 'filter'
      }
      // 重點3：X軸數(shù)據(jù)量超過4個則顯示滾動條，否則不顯示
      if(_this.bardatas.seriesData.length>4){
        _this.objdata.dataZoom = dataZoom
      }
      _this.MyEcharts.setOption(_this.objdata, true)
    }
  },

效果圖，有滾動條和無滾動條

2B.png

E.png