看题 x 轴显示不全,可以在xAxis.axisLabel 属性设置倾斜;
axisLabel: {
interval:0,
rotate:40
}
效果如图:
x轴移动 是设置dataZoom 属性
示例:
dataZoom:[{
show: true,
orient:'vertical',
width: 5,
left: 10,
startValue:0,
endValue:6,
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: '100%',
handleStyle:{color:"#ddd" },
textStyle:{color:"#666666"},
borderColor:"#eee"
}],
一般解决方案:
xAxis.axisLabel
旋转45°
角dataZoom
滑动刚好我前段时间实现过。
引入:
require('echarts/lib/component/dataZoom')
使用:
在option里设置dataZoom
let length = 22 //柱子个数
let end = 100 * 14 / length //横轴宽度的终点=100*柱子宽度/柱子个数
dataZoom:[{
type: "slider",
show: true,
xAxisIndex: [0],
start: 1,
end: end,
zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
handleSize: 0, //滑动条的 左右2个滑动条的大小
height: 6, //组件高度
right: 3, //右边的距离
bottom: 0,
brushSelect: false, //刷选功能
fillerColor: "#E0E0E0", //选中范围的填充颜色
borderColor: "#E0E0E0", //边框颜色
backgroundColor: "#FFF", //两边未选中的滑动条区域的颜色
borderRadius: 3,
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
filterMode: "filter"
},
{
type: "inside",
xAxisIndex: [0],
start: 1,
end: end,
zoomLock: true //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
}
]