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下面。

效果如图