首页 前端知识 echarts dataZoom使用

echarts dataZoom使用

2024-06-20 09:06:04 前端知识 前端哥 415 647 我要收藏

##1. echart横向柱状图滚动条从顶部开始

 dataZoom: [
      {
        id: 'dataZoomY',
        yAxisIndex: [0, 1],
        show: true, // 是否显示滑动条,不影响使用
        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        start: 100, // 默认显示0%
        width: 6,
        borderColor: 'green',
        // borderColor: 'transparent',
        fillerColor: '#ebeef5',
        zoomLock: true,
        showDataShadow: false, // 是否显示数据阴影 默认auto
        backgroundColor: 'red',
        // backgroundColor: '#fff',
        showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
        realtime: true, // 是否实时更新
        filterMode: 'filter',
        handleIcon: 'circle',
        handleStyle: {
          color: '#ebeef5',
          borderColor: '#ebeef5',
        },
        handleSize: '80%',
        moveHandleSize: 0,
        maxValueSpan: 10,
        minValueSpan: 10,
        brushSelect: false, // 刷选功能,设为false可以防止拖动条长度改变 ************(这是一个坑)
      },
      {
        type: 'inside',
        yAxisIndex: [0, 1],
        start: 0, // 默认显示0%
        zoomOnMouseWheel: false, // 滚轮是否触发缩放
        moveOnMouseMove: true, // 鼠标滚轮触发滚动
        moveOnMouseWheel: true,
      },
    ],

##1. echart纵向柱状图滚动条从顶部开始

 dataZoom: [
        {
          type: "slider",
          height: 10,
          textStyle: {
            fontSize: 12,
            color: "#2A2A2A" // 滚动条两边字体样式
          },
          show: gdwzjrlqkTableData.data.length > 18 ? true : false,
          xAxisIndex: [0],
          showDetail: false,
          bottom: 0,
          // fillerColor: "rgba(28, 114, 219, 0.93)",
          handleStyle: {
            color: "#17B9FF"
          },
          left: 20,
          right: 20,
          startValue: 0, //  初始显示值
          endValue: 18, //  结束显示值
          zoomLock: true,
          brushSelect: false
        },
        {
          type: "inside",
          height: 10,
          show: true,
          xAxisIndex: [0],
          start: 1, // 默认为1
          end: 100, // 默认为100
          zoomOnMouseWheel: false, // 如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。。
          moveOnMouseMove: true,
          moveOnMouseWheel: true // 鼠标滚轮实现移动
        }
      ]
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12963.html
标签
评论
发布的文章

爱心

2024-06-27 17:06:24

读魏书生的心得体会

2024-07-03 14:07:10

jQuery 选择器

2024-05-12 00:05:34

Vue中public/assets目录区别

2024-07-02 23:07:29

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!