记Echarts使用--X轴固定时间

最新推荐文章于 2024-05-22 21:33:25 发布

雷雨后的小巷

最新推荐文章于 2024-05-22 21:33:25 发布

阅读量2.9k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_41106665/article/details/128705766

版权

记Echarts使用–X轴固定时间

在使用echarts的时候，会有种每次初恋的感觉，不知道是记忆力减退，还是自己确实没接触过，但是明明感觉遇到过这种场景，却记忆不起。

因此，个人还是觉得好记性不如烂笔头

需求：
后台接口会给我们返回一整天的间隔5分钟的帧数据，然后我们需要将一整天分为7个段，x轴需要固定展示0:00 4:00 8:00 … 24:00；

最开始的想法是，将一天以5分钟划分，获取当天的数组，大约288个数据，再将后台返回的数据填充变成一个二维数组，但是结果出来，发现和想要的相差太远。

后来想到的一种方式是：自己造出来一个series的假数据，每项都是空值，但是每项的时间戳是固定的整小时的，然后再通过Xaxis中的splitNumber:将数据划为7个等分，这样的思路是因为，当天的数据可能不是完整的，因此x轴的数值撑不开。

不说了，上代码，以后有类似的直接拿过来整

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
		<script>
			let data = [
				[1673825982000, "1"],
				[1673826282000, "1"],
				[1673826582000, "1"],
				[1673826882000, "1"],
				[1673827182000, "2"],
				[1673827482000, "2"],
				[1673827783000, "2"],
				[1673828081000, "3"],
				[1673828382000, "3"],
				[1673828682000, "3"],
				[1673828982000, "4"],
				[1673829281000, "4"],
				[1673829582000, "4"],
				[1673829882000, "4"],
				[1673830182000, "5"],
				[1673830482000, "5"],
				[1673830782000, "6"],
				[1673831082000, "6"],
				[1673831382000, "6"],
				[1673831968000, "8"],
				[1673832268000, "18"],
				[1673832567000, "25"],
				[1673832868000, "26"],
				[1673833168000, "28"],
				[1673833467000, "30"],
				[1673833767000, "31"],
				[1673834068000, "32"],
				[1673834367000, "35"],
				[1673834668000, "38"],
				[1673834968000, "41"],
				[1673835268000, "44"],
				[1673835568000, "47"],
				[1673835868000, "53"],
				[1673836168000, "56"],
				[1673836468000, "62"],
				[1673836768000, "66"],
				[1673837068000, "72"],
				[1673837368000, "77"],
				[1673837668000, "85"],
				[1673837968000, "99"],
				[1673838268000, "106"],
				[1673838568000, "123"],
				[1673838868000, "154"],
				[1673839168000, "170"],
				[1673839468000, "205"],
				[1673839768000, "238"],
				[1673840069000, "249"],
				[1673840368000, "258"],
				[1673840669000, "274"],
				[1673840969000, "302"],
				[1673841269000, "340"],
				[1673841569000, "395"],
				[1673841869000, "445"],
				[1673842169000, "445"],
				[1673842770000, "445"],
				[1673843070000, "446"],
				[1673843371000, "444"],
				[1673843670000, "441"],
				[1673843971000, "434"],
				[1673844271000, "432"],
				[1673844571000, "416"],
				[1673844871000, "422"],
				[1673845171000, "431"],
				[1673845471000, "430"],
				[1673845771000, "428"],
				[1673846071000, "429"],
				[1673846371000, "421"],
				[1673846672000, "411"],
				[1673846972000, "407"],
				[1673847272000, "408"],
				[1673847572000, "403"],
				[1673847872000, "397"],
				[1673848173000, "386"],
				[1673848472000, "380"],
				[1673848772000, "375"],
				[1673849073000, "370"],
				[1673849373000, "368"],
				[1673849673000, "359"]
			]
			//造的假数据成为series中的其中一项
			//这里是以每个小时为一个单位的
			var mytime24 = new Array()
			var i = 0;
			var now_data = new Date()
			var year_now = now_data.getFullYear(),
				month_now = now_data.getMonth() + 1,
				day_now = now_data.getDate()
			var time_pre = `${year_now}/${month_now}/${day_now} 00:00:00`
			var ttt = (new Date(time_pre)).getTime()
			for (; i < 25; i++) {
				mytime24.push([ttt, '']); //传入value的值为空则该值点不会显示在图表中
				ttt = ttt + 3600000;
			}
			var myChart = echarts.init(document.getElementById('main'));
			let str = [];
			// str.push()
			let option = {
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					type: 'time',
					splitNumber: 7,   //设置下这里将x分为7段 8个刻度值
					splitLine: {     
						show: false   //隐藏x轴那条线
					},
					axisTick: {
						show: false   //隐藏x轴的刻度
					},
					axisLine: {
						show: false   
					},
					axisLabel: { // 格式化数据只显示时间的小时
						showMaxLabel: true,    //展示x轴的最后一个，一般我看是不展示的
						formatter: function(value, index) { //在这里写你需要的时间格式
							var t_date = new Date(value);
							console.log(index);
							if (index != 7) {
								return [t_date.getHours(), '00'].join(':')
							} else {
								return '24:00'
							}
						}
					},
					data: []
				},
				grid: {
					left: 44,
					right: 30,
					top: 40,
				},
				yAxis: {
					type: 'value',
					name: '发电功率（W）',
					nameLocation: 'end'
				},
				series: [{
					name: '',
					type: 'line',
					data: mytime24, //空数据  自己写的假数据
				}, {
					name: '',
					type: 'line',
					symbol: 'none',
					lineStyle: {
						color: '#FF8100'
					},
					areaStyle: { //关于折线图向下区域的设置，可以根据自己的需求来
						normal: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,

								colorStops: [{
										offset: 0,
										color: 'rgba(248,129,8,0.24)' // 0% 处的颜色
									},
									{
										offset: 1,
										color: 'rgba(255,129,0,0)' // 100% 处的颜色
									}
								],
								global: false // 缺省为 false
							},
						}
					},
					data
				}]

			}

			myChart.setOption(option)
		</script>
	</body>
</html>

只是记下经过，怕自己再次遗忘