EChart绘制风速风向曲线分析图
程序员文章站
2022-03-20 16:34:28
1、获取ECharts 在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。 2、引入ECharts 像普通的 JavaScript 库一样用 script 标签引入。 3、绘制图表 然后就可以通过 ......
1、获取echarts
在 echarts 的 github 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
2、引入echarts
像普通的 javascript 库一样用 script 标签引入。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- 引入 echarts 文件 --> 6 <script src="echarts.min.js"></script> 7 </head> 8 </html>
3、绘制图表
1 <body> 2 <!-- 为 echarts 准备一个具备大小（宽高）的 dom --> 3 <div id="main" style="width: 600px;height:400px;"></div> 4 </body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setoption 方法生成一个简单的柱状图，下面是完整代码。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>echarts</title>
6 <!-- 引入 echarts.js -->
7 <script src="echarts.min.js"></script>
8 </head>
9 <body>
10 <!-- 为echarts准备一个具备大小（宽高）的dom -->
11 <div id="main" style="width: 600px;height:400px;"></div>
12 <script type="text/javascript">
13 // 基于准备好的dom，初始化echarts实例
14 var data = [
15 [
16 1483488000000,
17 6.19,
18 0.9545
19 ],
20 [
21 1483574400000,
22 6.19,
23 0.2303
24 ],
25 [
26 1483660800000,
27 3.19,
28 0
29 ],
30 [
31 1483747200000,
32 6.19,
33 0
34 ],
35 [
36 1483833600000,
37 6.19,
38 4
39 ],
40 [
41 1483920000000,
42 11.19,
43 2
44 ],
45 [
46 1484006400000,
47 17.19,
48 4.7124
49 ]
50 ];
51 //数据参数顺序
52 var dims = {
53 time: 0,
54 windspeed: 1,
55 r: 2
56 };
57 //箭头大小
58 var arrowsize = 12;
59 //方向绘制
60 function renderarrow(param, api) {
61 var point = api.coord([
62 api.value(dims.time),
63 api.value(dims.windspeed)
64 ]);
65
66 return {
67 type: 'path',
68 shape: {
69 pathdata: 'm31 16l-15-15v9h-26v12h26v9z',
70 x: -arrowsize / 2,
71 y: -arrowsize / 2,
72 width: arrowsize,
73 height: arrowsize
74 },
75 rotation: api.value(dims.r),
76 position: point,
77 style: api.style({
78 stroke: '#555',
79 linewidth: 1
80 })
81 };
82 }
83
84 var option = {
85 title: {
86 text: '风速风向数据分析图',
87 left: 'center'
88 },
89 tooltip: {
90 trigger: 'axis',
91 formatter: function (params) {
92 return [
93 echarts.format.formattime('yyyy-mm-dd', params[0].value[dims.time])
94 + ' ' + echarts.format.formattime('hh:mm', params[0].value[dims.time]),
95 '风速：' + params[0].value[dims.windspeed],
96 '风向：' + params[0].value[dims.r]
97 ].join('<br>');
98 }
99 },
100 grid: {
101 top: 40,
102 bottom: 60
103 },
104 xaxis: {
105 type: 'time'
106 },
107 yaxis: [{
108 name: '风速（节）',
109 namelocation: 'middle',
110 namegap: 35,
111 axisline: {
112 linestyle: {
113 color: '#666'
114 }
115 },
116 splitline: {
117 linestyle: {
118 color: '#ddd'
119 }
120 }
121 }, {
122 axisline: { show: false },
123 axistick: { show: false },
124 axislabel: { show: false },
125 splitline: { show: false }
126 }],
127 visualmap: {
128 type: 'piecewise',
129 orient: 'horizontal',
130 left: 'center',
131 bottom: 10,
132 pieces: [{
133 gte: 17,
134 color: '#d33c3e',
135 label: '大风（>=17节）'
136 }, {
137 gte: 11,
138 lt: 17,
139 color: '#f4e9a3',
140 label: '中风（11 ~ 17 节）'
141 }, {
142 lt: 11,
143 color: '#18bf12',
144 label: '微风（小于 11 节）'
145 }],
146 seriesindex: 0,
147 dimension: 1
148 },
149 datazoom: [{
150 type: 'inside',
151 xaxisindex: 0,
152 minspan: 5
153 }],
154 series: [{
155 type: 'custom',
156 renderitem: renderarrow,
157 encode: {
158 x: dims.time,
159 y: dims.windspeed
160 },
161 data: data,
162 z: 10
163 }, {
164 type: 'line',
165 symbol: 'none',
166 encode: {
167 x: dims.time,
168 y: dims.windspeed
169 },
170 linestyle: {
171 normal: {
172 color: '#aaa',
173 type: 'dotted'
174 }
175 },
176 data: data,
177 z: 1
178 }]
179 };
180
181 mychart.setoption(option);
182
183 //窗口变化更改chart大小
184 window.onresize(function () {
185 mychart.resize();
186 });
187 </script>
188 </body>
189 </html>
运行测试图表如下:
推荐阅读