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

ゝ一世哀愁。 2022-12-11 13:52 733阅读 0赞

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

效果如图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c2VqaWVnZTY_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c2VqaWVnZTY_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6bf4cb6304c3459fb96f89080e77c4fd.png