Echarts折现柱状图问题。将X轴设置为24小时显示。

由于echartsX轴type设置为time时 是根据传入data数据的时间戳间隔来自动生成的X轴时间范围。

所以只需在X轴上加入一个不显示的24小时时间范围的折线图即可。

代码如下

methods:{
line(){
var myChart = echarts.init(document.getElementById("main"));
// 显示标题，图例和空的坐标轴
var mytime24 = new Array();
var i=0;
var ttt=1533139200000;
for(;i<23;i++){
mytime24.push([ttt,'']);//传入value的值为‘’则该值点不会显示在图表中
ttt=ttt+3600000;
}//生成24小时的时间范围数组数据。
myChart.setOption({
title: {
text: '步数统计图'
},
tooltip: {},
legend: {
data:['stopcount']
},
grid:{
show:'true',
borderWidth:'0'
},
xAxis: [{
splitLine:'false',
name:'时间',
type:'time',
data: []
}],
yAxis: {
name:'步数',
type:'value',
},
series: [{
name: '步数',
type: 'bar',
barWidth:25,
data: [[1533164400000,150],[1533168000000,150],[1533189600000,200],[1533204000000,350],[1533211200000,200]]
},
{
name:'步数',
type:'line',
data: [[1533164400000,150],[1533168000000,150],[1533189600000,200],[1533204000000,350],[1533211200000,200]]
},
{
name:'',
type:'line',
data:mytime24
}
]
});
}
}

由于本人项目用vue实现所以echarts代码在methods下面。

效果如图

最后

以上就是柔弱溪流为你收集整理的Echarts折现柱状图问题。将X轴设置为24小时显示。的全部内容，希望文章能够帮你解决Echarts折现柱状图问题。将X轴设置为24小时显示。所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。