echarts实现横向和纵向滚动条、dataZoom及其滚动条设置

最新推荐文章于 2024-06-08 21:17:27 发布

liu__software

最新推荐文章于 2024-06-08 21:17:27 发布

阅读量2.1w

点赞数 17

分类专栏： echarts 文章标签： echarts 前端 javascript

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

echarts实现横向和纵向滚动条、dataZoom

前言

使用echarts会遇到这种情况，以柱状图为例子，当数据过多时，echarts图就会堆叠在一起，看起来十分难看。通常解决办法是通过减小barWidth值来缩小柱子宽度，但是若数据达到上百条，这场面是相当壮观。另一个很常用的就是在外部容器div添加overflow: scroll;，这确实能解决一些问题，但是若是数据量过少，就会显的非常稀疏，经历过的都懂。言归正传，以上都不是最佳解决方式，echarts其实已经为提供好相应的API配置了，无论是横向滚动还是纵向滚动，dataZoom都能满足。

1、横向滚动条

dataZoom: [
    {
        // 设置滚动条的隐藏与显示
        show: true,
        // 设置滚动条类型
        type: "slider",
        // 设置背景颜色
        backgroundColor: "rgb(19, 63, 100)",
        // 设置选中范围的填充颜色
        fillerColor: "rgb(16, 171, 198)",
        // 设置边框颜色
        borderColor: "rgb(19, 63, 100)",
        // 是否显示detail，即拖拽时候显示详细数值信息
        showDetail: false,
        // 数据窗口范围的起始数值
        startValue: 0,
        // 数据窗口范围的结束数值（一页显示多少条数据）
        endValue: 5,
        // empty：当前数据窗口外的数据，被设置为空。
        // 即不会影响其他轴的数据范围
        filterMode: "empty",
        // 设置滚动条宽度，相对于盒子宽度
        width: "50%",
        // 设置滚动条高度
        height: 8,
        // 设置滚动条显示位置
        left: "center",
        // 是否锁定选择区域（或叫做数据窗口）的大小
        zoomLoxk: true,
        // 控制手柄的尺寸
        handleSize: 0,
        // dataZoom-slider组件离容器下侧的距离
        bottom: 3,
    },
    {
        // 没有下面这块的话，只能拖动滚动条，
        // 鼠标滚轮在区域内不能控制外部滚动条
        type: "inside",
        // 滚轮是否触发缩放
        zoomOnMouseWheel: false,
        // 鼠标滚轮触发滚动
        moveOnMouseMove: true,
        moveOnMouseWheel: true,
    },
]

2、纵向滚动条

dataZoom: [
    {
        // 设置滚动条的隐藏或显示
        show: true,
        // 设置类型
        type: "slider",
        // 设置背景颜色
        backgroundColor: "rgb(19, 63, 100)",
        // 设置选中范围的填充颜色
        fillerColor: "rgb(16, 171, 198)",
        // 设置边框颜色
        borderColor: "rgb(19, 63, 100)",
        // 是否显示detail，即拖拽时候显示详细数值信息
        showDetail: false,
        // 数据窗口范围的起始数值
        startValue: 0,
        // 数据窗口范围的结束数值（一页显示多少条数据）
        endValue: 5,
        // 控制哪个轴，如果是number表示控制一个轴，
        // 如果是Array表示控制多个轴。此处控制第二根轴
        yAxisIndex: [0, 1],
        // empty：当前数据窗口外的数据，被设置为空。
        // 即不会影响其他轴的数据范围
        filterMode: "empty",
        // 滚动条高度
        width: 8,
        // 滚动条显示位置
        height: "80%",
        // 距离右边
        right: 3,
        // 控制手柄的尺寸
        handleSize: 0,
        // 是否锁定选择区域（或叫做数据窗口）的大小
        zoomLoxk: true,
        // 组件离容器上侧的距离
        // 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
        top: "middle",
    },
    {
        // 没有下面这块的话，只能拖动滚动条，
        // 鼠标滚轮在区域内不能控制外部滚动条
        type: "inside",
        // 控制哪个轴，如果是number表示控制一个轴，
        // 如果是Array表示控制多个轴。此处控制第二根轴
        yAxisIndex: [0, 1],
        // 滚轮是否触发缩放
        zoomOnMouseWheel: false,
        // 鼠标移动能否触发平移
        moveOnMouseMove: true,
        // 鼠标滚轮能否触发平移
        moveOnMouseWheel: true,
    },
]

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)
    }
  },

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