echarts 柱状图滚动

实现效果：柱形图展示水平滚动条，并且鼠标滚动支持让滚动条平移

echarts文档里，图形的滚动条分两种

内置型（效果是：鼠标在图中点击拖动平移，在图中滚动缩放）
滚动条型（效果是：鼠标拖动滚动条平移，鼠标拖大缩小滚动条缩放）

而我们要实现的就是综合了这两种。。
既要内置型的能在图中滚动，又要滚动条的样式

实现代码

 const zoomData=[  // 有滚动条 平移{type: 'slider',realtime: true,start: 0,end: 40,  // 初始展示40%height: 4,fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色borderColor: "rgba(17, 100, 210, 0.12)", handleSize:0, // 两边手柄尺寸showDetail: false, // 拖拽时是否展示滚动条两侧的文字top:'96%',// zoomLock:true, // 是否只平移不缩放// moveOnMouseMove:true, //鼠标移动能触发数据窗口平移// zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放},{ type: "inside",  // 支持内部鼠标滚动平移start: 0,end: 40,zoomOnMouseWheel: false,  // 关闭滚轮缩放moveOnMouseWheel: true, // 开启滚轮平移moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 }]

moveOnMouseWheel和moveOnMouseMove 记得开启，
开启后滚轮往下滚数据往后移动

zoomOnMouseWheel 关闭滚轮缩放, 关闭后滚轮滚到最后不会有回弹抖动

再添加到option里即可
dataZoom: zoomData,

例子2

dataZoom: [{// 滚动条以及缩放type: "inside",// start: 0,// end: endZoom,    // 这里end跟数据有关系 数据越多，end越小 end是百分比例startValue: 0, // 从头开始。endValue: 6,  // 最多六个minValueSpan: 6,  // 放大到最少几个maxValueSpan: 365,  //  缩小到最多几个},],

这里的startValue和endValue代表初始只显示七个，七组柱子
minValueSpan代表放大到最少到显示几个
maxValueSpan代表缩小到最多显示几个

例子3：

垂直方向滚动条

dataZoom=[{type: "inside",startValue: 0, endValue: 2, minValueSpan: 2,  maxValueSpan: 2,  yAxisIndex: [0],zoomOnMouseWheel: false,  // 关闭滚轮缩放moveOnMouseWheel: true, // 开启滚轮平移moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 },{type: 'slider',realtime: true,startValue: 0, endValue: 2,  width:  '3.5',height:  '80%',yAxisIndex: [0], // 控制y轴滚动fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色borderColor: "rgba(17, 100, 210, 0.12)", backgroundColor: '#cfcfcf',//两边未选中的滑动条区域的颜色handleSize:0, // 两边手柄尺寸showDataShadow: false,//是否显示数据阴影 默认autoshowDetail: false, // 拖拽时是否展示滚动条两侧的文字top:'1%',right:'5',}]

echarts 柱状图滚动相关推荐

echarts柱状图两列单位不同
echarts柱状图两列单位不同代码 <div id="echarts" :style="{width:'700px',height:'600px',margin ...
echarts柱状图数据过多
echarts柱状图之数据过多时,实现横向拖动展示数据 dataZoom: [{type: 'slider',realtime: true,start: 0,// end: 20, // 数据窗口范围 ...
解决 echarts柱状图x轴数据隔一个显示
echarts柱状图x轴数据隔一个显示在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图: 那就只能说明这个轴的名称太长了,所以导致它默认就隔一 ...
前端vue显示柱状图_Vue—Echarts 柱状图
使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据,下面是使用Echarts柱状图来展示对应数据的实例. ee05abaf9633184a9c012631b642d970.png ...
echarts柱状图改变标签的位置及柱状图颜色
echarts柱状图改变标签的位置(柱状图里面的数值位置)及柱状图颜色在 series里面改变label对象里面的label属性 import * as echarts from 'echarts' ...
Echarts 柱状图调整 y 轴单位标题与图表之间的距离
Echarts 柱状图调整 y 轴单位标题与图表之间的距离在我们绘制图标的时候,有时 y 轴单位标题的位置距离图标太近,影响美观,如图所示: 我们想把元离图表远一些,怎么操作? option = ...
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记展示效果如下(主要记录一下如何在柱状体实体里面展示自定义的数据和在顶部展示自定义数据) 柱状图实体展示数据 series: [{ na ...
echarts 柱状图渐变色背景
如何制作柱状图渐变色背景,我们可以先参考 echarts 柱状图颜色设置.接下来我们来实战一下,看看这次的效果图吧. 首先我们可以看到,X 轴表示数据,Y轴表示类别.柱状图上有该地区的数量,同时柱状图 ...
点击echarts柱状图动态改变数据项颜色样式
首先附上参考文章连接:https://blog.csdn.net/weixin_42870683/article/details/103528254添加链接描述今天来实现点击echarts柱状图,动 ...

echarts 柱状图滚动

echarts 柱状图滚动相关推荐

最新文章

热门文章