3.1 Contour绘制
首先一起学习利用百度的开源项目绘制contour，百度搜索“echarts heatmap”，找到热力图的一个案例（http://echarts.baidu.com/examples/#chart-type-heatmap），点击这个案例：
发现这个案例代码量很多（近400行），不便于初学：
经过梳理我们发现，该程序的核心在于参数option（第25行），这个参数给定了绘制云图所包含的数据，我们不妨把数据修改简单一点。程序主要有三个关键参数xData，yData和data，分别表示x轴的坐标值数组、y轴的坐标值数组、以及云图数据（等高值）。我们把数据修改一下：
1. var xData = [];
2. var yData = [];
3.
4. functiongenerateData(theta, min, max) {
5. var data = [];
6. for (var i = 0; i<= 200; i++) {
7. for (var j = 0; j<= 100; j++) {
8. // var x = (max - min) * i / 200 + min;
9. // var y = (max - min) * j / 100 + min;
10. data.push([i,j, (i*i+j*j)/10000]);
11. }
12. xData.push(i);
13. }
14. for (var j = 0; j< 100; j++) {
15. yData.push(j);
16. }
17. return data;
18. }
19. var data =generateData(2, -5, 5);这样就由原来的柏林随机分布修改成了圆（(i*i+j*j)/10000），这里i和j可以理解为横纵坐标。然后得到如下结果：
至此，我们借助百度开源项目echarts实现云图绘制。全部源代码如下：
1. <!DOCTYPE html>
2. <html style="height: 100%">
3. <head>
4. <meta charset="utf-8">
5. </head>
6. <body style="height: 100%;margin: 0">
7. <div id="container"style="height:100%"></div>
8. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
9. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
10. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
11. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
12. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
13. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
14. <script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
15. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
16. <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
17. <script type="text/javascript">
18. var dom= document.getElementById("container");
19. varmyChart = echarts.init(dom);
20. var app= {};
21. option= null;
22. app.title= '热力图 - 2w 数据';
23.
24.
25. varxData = [];
26. varyData = [];
27.
28. functiongenerateData(theta, min, max) {
29. vardata = [];
30. for(var i = 0; i <= 200; i++) {
31. for(var j = 0; j <= 100; j++) {
32. //var x = (max - min) * i / 200 + min;
33. //var y = (max - min) * j / 100 + min;
34. data.push([i,j, (i*i+j*j)/10000]);
35. }
36. xData.push(i);
37. }
38. for(var j = 0; j < 100; j++) {
39. yData.push(j);
40. }
41. returndata;
42. }
43. vardata = generateData(2, -5, 5);
44.
45. option= {
46. tooltip:{},
47. xAxis:{
48. type:'category',
49. data:xData
50. },
51. yAxis:{
52. type:'category',
53. data:yData
54. },
55. visualMap:{
56. min:0,
57. max:5,
58. calculable:true,
59. realtime:false,
60. inRange:{
61. color:['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090','#fdae61', '#f46d43', '#d73027', '#a50026']
62. }
63. },
64. series:[{
65. name:'Gaussian',
66. type:'heatmap',
67. data:data,
68. itemStyle:{
69. emphasis:{
70. borderColor:'#333',
71. borderWidth:1
72. }
73. },
74. progressive:1000,
75. animation:false
76. }]
77. };
78. if(option && typeof option === "object") {
79. myChart.setOption(option,true);
80. }
81. </script>
82. </body>
83. </html>想借助这个开源项目完成自己的项目，还有很多工作要做。这时有人会问云图只能绘制矩形的吗？不规则图形的云图怎么绘制呢？比如中国天气预报里地图就是不规则的。这里给出一个思路供初学者参考，具体内容请查阅3.1.1、3.1.2、3.1.3的详细介绍。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2018-07-25，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 传输过程数值模拟学习笔记 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ，欢迎热爱写作的你一起参与！
评论
登录后参与评论
推荐阅读
腾讯云开发者
