2021-03-22 echart 滚动条设置

前言：echart没有滚动条概念，有配置选项类似滚动条，通过手段模拟滚动条效果....省略很多字（难）
dataZoom配置官网链接：https://echarts.apache.org/zh/option.html#dataZoom

// 定义数据dataZoom相关
data() {
    return {
      MyEcharts: '', //echarts实例
      objdata: {},
      titleFontSize: 12,
      txtFontSize: 10,
      dataZoomEnd:0,//计算可视宽度（dataZoom)
      dataZoomNum:4//定义可视项目个数（dataZoom)
    }
  },

methods: {
    drawBar() {
      let _this = this
//重点1：计算可视视图所占比例，这里this.dataZoomNum设置了显示4个在X轴上，
//比如X轴数据一共有8个（只显示前面4个）100/8*4=50（100/X轴数据总个数*自定义显示个数）
      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
        // 判断全屏放大时候需要显示所有，所以设置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() //适用于大数据量的切换时图表绘制错误,先清空在重绘
      _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 设置滚动条的样式
      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)', //两边未选中的滑动条区域的颜色
        showDataShadow: false, //是否显示数据阴影 默认auto
        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
        filterMode: 'filter'
      }
      // 重点3：X轴数据量超过4个则显示滚动条，否则不显示
      if(_this.bardatas.seriesData.length>4){
        _this.objdata.dataZoom = dataZoom
      }
      _this.MyEcharts.setOption(_this.objdata, true)
    }
  },

效果图，有滚动条和无滚动条

2B.png E.png