Echarts具有自适应的功能，因此当x轴或者y轴的数据非常多的时候，会自动把柱形的宽度挤的非常细，这样的交互肯定是过不去的。
用到的属性： dataZoom
官方文档：echarts.baidu.com/option.html…
x轴滚动：
dataZoom: [
{
"show": true,
"height": 12,
"xAxisIndex": [0],
bottom: 0,
"start": 0,
"end": 100,
maxValueSpan: 18,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
color: "#d3dee5",
},
textStyle: {
color: "#fff"
},
borderColor: "#90979c"
},
{
"type": "inside",
"show": true,
"height": 15,
"start": 0,
"end": 100
}
],
效果：
y轴滚动
dataZoom: [
{
type: 'slider',
width:15,
show: true,
yAxisIndex: [0],
left: '97%',
// borderColor: "#000",
// fillerColor: '#269cdb',
// borderRadius:5,
// backgroundColor: '#f1f1f1',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
realtime:true, //是否实时更新
start: 0, //数据窗口范围的起始百分比
end: 100-1500/31
},
{
type: 'inside',
yAxisIndex: [0],
start: 0,
end: 100-1500/31
}
]
效果：
