3.1 Contour drawing

3.1 Contour drawing

Let’s first learn to draw contours using Baidu’s open source project. Baidu searches for “echarts heatmap” and finds a case of heat map (http://echarts.baidu.com/examples/#chart-type-heatmap), click on this case:

I found that this case has a lot of code (nearly 400 lines), which is not convenient for beginners:

After combing, we found that the core of the program is the parameter option (line 25). This parameter gives the data contained in the drawing of the cloud diagram. We might as well make the data modification simpler. The program mainly has three key parameters xData, yData and data, which respectively represent the coordinate value array of the x-axis, the coordinate value array of the y-axis, and the cloud image data (contour value). Let's modify the data:

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);

In this way, the original Berlin random distribution is modified to a circle ((i*i+j*j)/10000), where i and j can be understood as the abscissa and ordinate. Then get the following result:

So far, we use Baidu's open source project echarts to achieve cloud map drawing. The full source code is as follows:

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 ='Heat map-2w data';
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>

Want to use this open source project to complete your own project, there is still a lot of work to be done. At this time, someone will ask if the cloud can only draw rectangles? How to draw irregular shapes of cloud pictures? For example, the map in China's weather forecast is irregular. Here is an idea for beginners to refer to. For details, please refer to the detailed introduction of 3.1.1, 3.1.2, and 3.1.3.

Reference: https://cloud.tencent.com/developer/article/1180609 3.1 Contour Drawing-Cloud + Community-Tencent Cloud