欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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>

运行测试图表如下:

EChart绘制风速风向曲线分析图