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

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

methods: {
    drawBar() {
      let _this = this
//重點(diǎn)1：計(jì)算可視視圖所占比例饮亏，這里this.dataZoomNum設(shè)置了顯示4個(gè)在X軸上赖淤，
//比如X軸數(shù)據(jù)一共有8個(gè)（只顯示前面4個(gè)）100/8*4=50（100/X軸數(shù)據(jù)總個(gè)數(shù)*自定義顯示個(gè)數(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í)候需要顯示所有尔苦，所以設(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()
        }
      }) //當(dāng)窗口變化時(shí)隨瀏覽器大小而改變
      _this.refreshFn()
    },
    refreshFn() {
      let _this = this
      _this.MyEcharts = _this.$echarts.init(document.getElementById(_this.id))
      _this.MyEcharts.clear() //適用于大數(shù)據(jù)量的切換時(shí)圖表繪制錯(cuò)誤,先清空在重繪
      _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%'
        },
       ......
      }
//重點(diǎn)2 設(shè)置滾動(dòng)條的樣式
      let dataZoom = {
        start: 0, //默認(rèn)為0
        end: _this.dataZoomEnd, //  默認(rèn)為100（重點(diǎn)）
        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',// 畫一個(gè)圓形
        handleSize: '100%',
        handleStyle: {
          color: 'rgba(27,90,169,1)',
          borderWidth: 0
        },
        backgroundColor: 'rgba(37, 46, 100, 0.8)', //兩邊未選中的滑動(dòng)條區(qū)域的顏色
        showDataShadow: false, //是否顯示數(shù)據(jù)陰影 默認(rèn)auto
        showDetail: false, //即拖拽時(shí)候是否顯示詳細(xì)數(shù)值信息 默認(rèn)true
        filterMode: 'filter'
      }
      // 重點(diǎn)3：X軸數(shù)據(jù)量超過4個(gè)則顯示滾動(dòng)條流码，否則不顯示
      if(_this.bardatas.seriesData.length>4){
        _this.objdata.dataZoom = dataZoom
      }
      _this.MyEcharts.setOption(_this.objdata, true)
    }
  },

效果圖署惯，有滾動(dòng)條和無(wú)滾動(dòng)條

2B.png

E.png