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的详细介绍。

原文发布于微信公众号 - 传输过程数值模拟学习笔记(SongSimStudio)

原文发表时间:2018-07-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏决胜机器学习

机器学习(十四) ——朴素贝叶斯实践

机器学习(十四)——朴素贝叶斯实践 (原创内容,转载请注明来源,谢谢) 一、垃圾邮件分类 垃圾邮件分类,即通过读取邮件的内容,并打上标记其是垃圾邮件或者是正常...

36270
来自专栏ATYUN订阅号

使用Tensor2Tensor和10行代码训练尖端语言翻译神经网络

有许多库可以帮助人们构建深度学习应用程序,但如果想使用最新架构的最先进模型和最少的代码,有这样一个API脱颖而出:Google的Tensor2Tensor。我通...

30920
来自专栏编程心路

人人都可以用C语言写推箱子小游戏

C语言,作为大多数人的第一门编程语言,重要性不言而喻,很多编程习惯,逻辑方式在此时就已经形成了。这个是我学习 C语言 后写的推箱子小游戏,自己的逻辑能力得到了提...

1.1K40
来自专栏ATYUN订阅号

【学术】不懂神经网络?不怕,一文教你用JavaScript构建神经网络

AiTechYun 编辑:xiaoshan.xiang 本文的内容并不是关于神经网络的深度教程,在这里既不会深入研究输入层、激活函数的内部原理,也不会教你如何使...

35140
来自专栏UAI人工智能

[译] TensorFlow 白皮书

53660
来自专栏媒矿工厂

基于MCMC的X265编码参数优化方法

新一代视频编码标准,包括高效视频编码HEVC和音频视频编码标准AVS2近年来已被提出以进一步提高H.264/AVC编码标准的压缩性能。在相同的主观视觉的前提下,...

33330
来自专栏Crossin的编程教室

【每周一坑】蜥蜴流感与贝叶斯定理

春季是流感的高发季节。不要觉得只是小小的“感冒”,严重起来甚至也会危及生命,而且还没有特效药。因此,身体不适请及时到医院检查。

16730
来自专栏小红豆的数据分析

acmer之路(3)四月第一周日志

这一周加入了院足球队,好久都没有感受到在赛场上奔腾的感觉了。不过正好赶上清明,因此也算有充足的时间来码代码。这个月一共码了20题,排名终于冲进了四万名。

12910
来自专栏BestSDK

Pytorch 0.3.0 发布:新增张量函数,支持模型移植

根据官方文档的介绍,此次增加了多个函数和功能,多方面的性能均实现提升。 重大变更 0.3 版本中删掉了 Variable.reinforce() 等随机函数,因...

37580
来自专栏数据小魔方

R语言学习笔记——柱形图

今天分享R语言中的柱形图,所有图表语法都基于ggplot2包中的ggplot函数完成 。 其实R语言本身就带有各种作图函数,比如plot、bar、pie等,而且...

553130

扫码关注云+社区

领取腾讯云代金券