echarts中grid的使用以及柱状图中数据太多利用DataZoom实现自动横线滑动展示
一、grid,调整canvas内容
用于决定直角坐标系内绘图网格的位置,ECharts 3 及其以上允许存在多个grid
以下用几张图说明其效果:
问题:在使用echarts时总是会遇到canvas内容不占满空间,导致许多留白。不知道grid配置之前采用的方法就是调大外盒子,以至于会超出范围(虽然也能达到想要的效果,但显然是不合理的)
使用grid之后:
实现代码:可手动给left、right、top、bottomm值,当然也能使用百分比,此处不多介绍。
option.grid = {
left: 15,
right: 15,
top: 15,
bottom: 10,
containLabel: true,
};
myChart.setOption(option);
grid配置项:图标离容器的距离
show:是否显示直角坐标系网格-----------值:true?false
left:图表离容器左侧的距离-----------------值:number?百分比
top:图表离容器顶部的距离-----------------值:number?百分比
right:图表离容器右侧的距离---------------值:number?百分比
bottom:图表离容器底部的距离------------值:number?百分比
backgroundColor:网格背景色-------------值:rgba或#000000
borderColor:网格的边框颜色--------------值:rgba或#000000
borderWidth:网格的边框线宽-------------值:number
二、DataZoom,实现柱状图数据过多的自动滑动
效果:ps:emmm因为csdn不能上传视频就下了个流氓app转换成了gif,忽略水印哈。。。
实现代码:
let option = {
dataZoom: [
//滑动条
{
show: false, //是否显示滑动条
type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 5, // 一次性展示6个。
},
],
}
// 基于准备好的dom,初始化echarts实例
if (this.barChart) {
// 使用刚指定的配置项和数据显示图表。
this.barChart.setOption(option);
} else {
this.barChart = echarts.init(
document.getElementById("item3b192c10-1d09-11ed-9253-19fac822b37c")
);
this.barChart.setOption(option);
clearInterval(this.barTimer);
// 使用刚指定的配置项和数据显示图表。
this.barTimer = setInterval(() => {
// 每次向后滚动一个,最后一个从头开始。
//判断是否滑动到最后一条数据,若是,则重置柱状图(显示前6条数据)
if (option.dataZoom[0].endValue == data.length / 2 - 1) {
option.dataZoom[0].endValue = 5;
option.dataZoom[0].startValue = 0;
} else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
}
this.barChart.setOption(option);
}, 3000);
datazoom其他的用法可以去官网了解...