Echarts增加滚动条及缩放dataZoom ⽅案1：⽀持⿏标中间滑轮滑动进⾏缩放的展⽰，并且⽀持⿏标点击滚动条活动 {
end: 100-1500/31,//默认为100
type: 'slider',
程控电压衰减器
show: true,
xAxisIndex: [0],
handleSize: 0,//滑动条的左右2个滑动条的⼤⼩
height: 8,//组件⾼度
left: 50, //左边的距离
right: 40,//右边的距离
bottom: 26,//右边的距离
handleColor: '#ddd',//h滑动图标的颜⾊
handleStyle: {
汽轮机转子borderColor: "#cacaca",
borderWidth: "1",
shadowBlur: 2,
background: "#ddd",
shadowColor: "#ddd",
},
fillerColor: aphic.LinearGradient(1, 0, 0, 0, [{领衬
//给颜⾊设置渐变⾊前⾯4个参数，给第⼀个设置1，第四个设置0 ，就是⽔平渐变
//给第⼀个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: '#1eb5e5'
}, {
offset: 1,
color: '#5ccbb1'
}]),
backgroundColor: '#ddd',//两边未选中的滑动条区域的颜⾊
showDataShadow: false,//是否显⽰数据阴影默认auto showDetail: false,//即拖拽时候是否显⽰详细数值信息默认true
handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4, filterMode: 'filter',
},
//下⾯这个属性是⾥⾯拖到
{
type: 'inside',
show: true,
xAxisIndex: [0],
start: 0,//默认为1
end: 100-1500/31,//默认为100
},
],
⽅案2：
例展⽰10条数据时：仅⽀持⿏标点击滚动条活动镀铬工艺
if(results.length >10 ){
var dataZoom_end = 100-(9/results.length)*100; }else{
var dataZoom_end = 0;
}
dataZoom: [
{ width:'15',pvc管件配方
start:dataZoom_end,
end:100,
type: 'slider',
yAxisIndex: 0,
//filterMode: 'empty',
textStyle:{
color:'#fff',
智能浴缸fontSize:'16'
}
}
],
图⽚上值上增加%的⽅法：
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议