用echarts显示本年365天每天的数据

前天有这样的一个需求，就是使用echarts显示一年365天的数据情况，小编当时看着需求文档发现那365天的数据全部都挤在了一堆，那效果可谓糟糕，昨天看了一下echarts图标，发现有一个列表叫数轴缩放，感觉和该需求还挺贴切，今天已实现来一起看看吧

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="lib/esl.js">script>
		<script src="lib/config.js">script>
		<link rel="stylesheet" href="lib/reset.css" />
		<script src="dist/echarts.js">script>
		<style>
			#main {
				width: 800px;
				height: 500px;
			}
		style>
		<script>
			var myDate = new Date;
			var year = myDate.getFullYear();
			var i = 1;
			let now = new Date(year, 0, 0);
			let oneDay = 24 * 3600 * 1000;
			var j = true;
			var arrallyeardate = [];
			do {
				now = new Date(+now + oneDay);
				var month = now.getMonth() + 1;
				arrallyeardate.push(now.getFullYear() + "-" + month + "-" + now.getDate());
				if (month == 12 && now.getDate() == 31) {
					var j = false;
				}
			} while (j)//通过do..while..语句循环查询本年每天日期
			console.log(arrallyeardate); //打印的是本年每天的日期
			var data = [];
			for (var k = 1; k <= arrallyeardate.length; k++) {
				data.push(randomRange(0, 500))
			}//随机生成对应的日期的
			var option;
			require([
				'echarts'
			], function(ec) {
				echarts = ec;
				colorTool = echarts.color;
				chart = myChart = echarts.init(document.getElementById('main'));
				arrallyeardate = arrallyeardate.map(function(str) {
					return str.replace('2022-', '');
				});
				option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
							label: {
								show: true
							}
						}
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					calculable: true,
					legend: {
						data: ['Growth', 'Budget 2011'],
						itemGap: 5
					},
					grid: {
						top: '12%',
						left: 30,
						right: 1,
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: arrallyeardate
					}],
					yAxis: [{
						type: 'value',
						name: 'Budget (million USD)',
						axisLabel: {
							formatter: function(a) {
								a = +a;
								return isFinite(a) ? echarts.format.addCommas(+a / 1000) : '';
							}
						}
					}],
					dataZoom: [{
							show: true,
							start: 94,
							end: 100
						},
						{
							type: 'inside',
							start: 94,
							end: 100
						}
						//,{
				          //show: true,
				          //yAxisIndex: 0,
				          //filterMode: 'empty',
				          //width: 30,
				          //height: '80%',
				          //showDataShadow: false,
				          //left: '93%'
				        //}该段代码为y轴缩放，小编面对的需求不需要所以注释了
					],
					series: [{
							name: 'Budget 2011',
							type: 'line',
							data: data
						}
					]
				};
				chart.setOption(option);
				chart.on('click', function(params) {
					console.log(params.data);
				});
			});

			function randomRange(min, max) { // min最小值，max最大值
				return Math.floor(Math.random() * (max - min)) + min;
			}
		script>
	head>
	<body>
		<div id="main">div>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

显示结果，可根据x轴缩放显示想看的区域
在这里插入图片描述

最近刚刚完成需求，小编竟然感觉如释重负，实现功能点不简单，业务复杂还涉及到其他开发人员的开发模块逻辑，这大概就是小编现在经常遇到的痛点了，连续加了三周班，好在最后都按时完成了任务

相关阅读:
Elasticsearch基础增删改查
 Json递归删除和修改节点
 【Python基础】字典和函数拓展
 1.1MQ的基本概念，优劣势介绍及 RabbitMQ简介
 GmNAC181促进结瘤并提高根瘤的耐盐性
 JAVASE总结作业----异常处理
 pve lxc debian 11安装docker遇到bash: sudo: command not解决办法
 【Godot4自学手册】第四十一节背包系统（一）UI设置
 MyBatis 如何使用set标签呢？
方法2—并行数据流转换为一种特殊串行数据流模块的设计，
原文地址：https://blog.csdn.net/weixin_43942765/article/details/126504615