Echarts+D3可视化开发工具集
1、前言
大学三年期间，学的很杂，但惟一坚持的就是在作可视化开发，有个负责任的指导老师很重要。由于即将大四，以后不必定会再继续朝这个方面学习，因此把以前参加比赛的经验总结 一下，以及作一个笔记，以后忘记了还能够有资料能够查询。javascript
所谓可视化，就是将大量的数据用图表形式展示出来，并分析其中的规律，获得一些分析结果，这就是所谓的可视分析。html
可视化主要是基于JavaScript，不管怎么变着花样，就是感受在学JavaScript。因此想学好可视化，前端知识很重要，起码最基本的语法要会，否则没办法玩下去。由于在可视的过程当中就至关于在作网页，不断的去美化，使得你的系统让别人看起来舒服，美观和简洁。前端
2、Echarts.js库的使用
1.引用
Echarts是百度开发的一款可视分析库，从后缀名就能够看出，他是基于JavaScript的，由百度开发维护。vue
官网地址为Echarts，GitHub地址为Echarts GitHub。java
作简单的页面引用echarts的方法是经过script标签来引用echarts.js库，而后在代码中对其初始化便可，使用方法比较简单。echarts.js这个库能够在官网中下载页面下载，在页面的最后处，点击下载源代码便可得到。或者下载GitHub上面的源码，echarts.js库在dist文件夹项下面。经过这两种方式能够得到最新版的echarts。node
2.开发文档
在官网点击文档中的教程，能够简单了解echarts并绘制一个简单的图形，做为入门操做。react
点击配置项，这是以后开发过程当中全部绘图操做的讲解。而API这一栏是若是开发的图形涉及到点击事件以及其余方面就在这里面查看。git
每一个图形咱们不可能一个一个本身敲出来，咱们能够借用echarts官网的代码模板(官网–>实例–>官方实例)，而后选择本身想要的图形点击进去，就能够复制代码运行了。github
若是这些代码面板很差看或者没有知足本身的需求，能够点击社区–>Gallery，这里面是网友开发的一些图形，比较美观，能够用来作本身的模板。web
3.实例讲解
经过绘制一个简单的图表来说解echarts的使用。使用echarts很简单，主要分为如下几个步骤。
引入echarts、建立一个div来绘制图形、初始化echarts实例、给option添加元素、将option放入到div中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具有大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
4.使用总结
国产货，中文资料多，百度一查，不少资源。集成度高，使用方便，便于入门，可视效果较好。
3、D3.js库的使用
1.引用
D3和echarts同样，也是一款可视图形库，也是基于JavaScript的，他是国外开发的。
使用方式好echarts同样，经过script引用，下载地址在官网首页向下翻一些就能够得到。目前D3已经升级到V5了，开发的时候尽可能用V4和V5来开发，两者差异不是很大，但V3的差异仍是比较大的，用这个须要改不少代码。
2.资料索引
中文API文档，实例库，V3与V4的差异，这是D3的一些官方参考资料。通常学习D3就经过这些来学，不会的知识点看开发文档，本身要作一个图形能够去实例库卡源码，而后改。推荐使用V4和V5，尽可能不使用V3。
另外D3是用SVG画图的，而echarts是用canvas画图。svg仍是要了解一下，才能更好的学习d3。能够在SVG|MDN来学习svg的知识。
3.实例讲解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="test-svg">
</div>
</body>
<script src="https://d3js.org/d3.v5.js"></script>
<script>
window.onload = function() {
// 原始数据
var datax = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
var datay = [120, 200, 150, 80, 70, 110, 130];
//宽高和边框
var width = 800,
height = 400,
padding = {
top: 10,
right: 40,
bottom: 40,
left: 40
};
//建立一个svg盒子
var svg = d3.select("#test-svg")
.append('svg')
.attr('width', width + 'px')
.attr('height', height + 'px');
// x轴
var xScale = d3.scaleOrdinal()
.domain(datax)
.range([100, 200, 300, 400, 500, 600, 700]);
var xAxis = d3.axisBottom()
.scale(xScale);
svg.append('g')
.call(xAxis)
.attr("transform", "translate(0," + (height - padding.bottom) + ")")
.selectAll("text")
.attr("dx", "50px");
// y轴
var yScale = d3.scaleLinear()
.domain([0, d3.max(datay)])
.range([height - padding.bottom, padding.top]);
var yAxis = d3.axisLeft()
.scale(yScale)
.ticks(10);
svg.append('g')
.call(yAxis)
.attr("transform", "translate(" + 100 + ",0)");
var bar = svg.selectAll(".bar")
.data(datay)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d, i) {
return "translate(" + xScale(i * 100) + "," + yScale(d) + ")";
});
//建立矩形
bar.append("rect")
.attr("x", 1)
.attr("width", 100)
.attr("height", function(d) {
return height - yScale(d) - padding.bottom;
})
.attr("stroke", "White");
//添加文本
bar.append("text")
.attr("dy", ".75em")
.attr("y", 6)
.attr("x", 50)
.attr("text-anchor", "middle")
.attr("font-size", "8px")
.attr("fill", "White")
.text(function(d) {
return d;
});
}
</script>
</html>
上面这个例子是用V5作的一个柱形图，D3的语法和echarts不太同样，主要是在用JavaScript中的attr，改变一些属性内容达到绘图的效果，具体的知识总结多看看别人的实例。
4.使用总结
D3是国外开发的，资料相比较echarts会比较少，入门比较难，要求代码底子厚才能作出和echarts相媲美的图形。通常的话作出来的图形都比较死板，灵活性和美化行都不行。
4、Echarts和D3的区别
首先谈谈这两个可视化库的使用感想吧。echarts做为国内的可视化库，我查阅了有关资料，挑战赛用echarts的队伍愈来愈多，D3在挑战赛前几届都是蝉联冠军，随着echarts的不断丰富和发展，在18年挑战赛的时候就成为了使用队伍最多的可视库。
Echarts和D3的区别，就像是造房子时须要窗户，能够选择echarts牌的定制铝合金窗，也能够选择用D3牌的造窗工具本身打造性化的窗户。并且Echarts在文档完整性、社区活跃度、中文化、学习难度上具备优点。D3的主要是优点在于，能更加灵活地建立独特的交互式图表。显而易见的是，在挑战赛有限的比赛时间中，以Echarts为表明的可视化图表套件，能够更便捷高效地搭建系统，并获得中上的效果。而定制化的可视化图表虽好，可若是没有足够的时间打磨，效果还不如可视化图表套件。目前大多数参赛队伍都是高校师生，把有限的时间用于呈现和解释数据已经竭尽所能，能定制新颖高效的可视化图表者百里挑一。因此对于技术的掌握，要早布局，早投入，才能避免“待到用时方恨少”的状况。固然我仍是很看好Echarts国产精品开源软件的，若是Echarts能在可定制性上继续发展，将大大下降学习难度，提升开发效率。
能够参考原文地址 。
是对两个可视化库区别的介绍。而 我使用这两个库的感想是，在比赛中，我建议使用echarts，在平常学习中，建议D3和echarts共同窗习。原文在比赛中咱们时间很短，通常用D3作一个图形时间花费长，而且查询的资料少，而后作出来的图形很死板，交互性不好，除非学的很六很六，否则作不到echarts那种效果。
echarts包装了一下事件，咱们只要用就行，不须要在乎他是如何实现的，由于咱们比赛时间只有这么短，不可能每天研究如何实现这个功能，咱们应该把咱们的重点放在分析和各个组件之间的交互操做上面，而不是为了这个图形花费了两三天，这是不值得的。
因此我建议若是之后参加这个挑战赛，尽可能使用echarts，这样咱们会获得更多的时间在分析上面。按照以往的题目是比赛，重点在于数据处理和分析，可视展现不是第一位的，不能花费不少时间在调试可视化的代码调试上面。
其实echarts也是开源的，只是封装的比较好，D3虽然重点是咱们本身去设计，我以为咱们目前没这个能力去学底层原理，咱们只要会用便可。无论白猫黑猫，抓到老鼠就是好猫。因此咱们只要能获奖，那哪门工具就是最好的。D3入门较难，并且例子不多，对初学者不太行。
上述我虽然比较推荐echarts，不是由于他简单，而是要根据实际状况来决定，在短期内完成比赛确定选echarts，日常学习两者就都要学。
5、开发工具
1.VScode
网页编程首选确定是vscode啦，号称宇宙第一编辑器。不过确实很好用，小巧简洁，启动速度款，能够根据须要配置各类插件，仍是很香的。
另外还可使用国产工具HBuilder X，也是一款不错的网页编辑器，主要是他对vue仍是比较友好，后面咱们用vue开发项目比较舒服。
还有一个我没有用过，webstorm也是比较好的，JetBrains全家桶成员之一，和pycharm一个公司的，我对JetBrains公司的概念就时笨重，不管是启动仍是运行上，都没有前两款工具用的爽。但功能一个会很强大，毕竟专业。
2.Google Chrome
前端的展现环境都是在浏览器上面。而如今浏览器用户数量最多的就是谷歌浏览器了，并且用起来会比其余浏览器用起来好用。若是不喜欢Google，也能够选择其余浏览器，我推荐的是火狐、欧朋、还有Windows自带的edge浏览器，这些都是有本身的内核的，而市场上的360等浏览器都是用这些内核，而且广告超多，用起来很不舒服。
还有开发的话尽可能不要选择用IE浏览器，兼容性差，若是在IE上面开发的话，用其余浏览器不会打开，这就是兼容性的问题。
因此我一直推荐使用谷歌浏览器，对前端开发人员来讲是不可少的利器。
3.Pycharm
可视化怎么能少了Python来处理数据呢？可视的数据不可能都是原数据直接画图，确定是须要按照本身的想法来处理数据，处理数据就少不了Python，而如今用Python最强的工具就是pycharm，虽然笨重，但vscode的提示实在是让我不爽，一时有，一时无，找了好久也不知道问题出在哪里，因此就放弃了用宇宙第一编辑器来写Python，用pycharm就很好的解决的这个问题。
另外，JetBrains全家桶是收费的，这时咱们就想到去破解了，你们支持一下知识产权很差吗，哈哈哈，还真很差，我也用过破解的。若是是学生的话能够用学校的edu邮箱在JetBrains官网进行学生认证的，这样就能够无偿使用了。给一个认证教程，认证完成后就能够去pycharm免费激活了。使用期限是一年，一年后又能够继续去认证，这样就可使用正版工具了。
6、环境搭建
1.Node.js
node简介，Nodejs框架是基于V8的引擎，是目前速度最快的 Javascript引擎。chrome浏览器就基于V8，同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express，能够帮 助咱们迅速创建web站点，比起PHP的开发效率更高，并且学习曲线更低。很是适合小型网站，个性化网站。
Node.js是一个javascript运行环境。它让javascript能够开发后端程序，实现几乎其余后端语言实现的全部功能，能够与PHP、Java、Python、.NET、Ruby等后端语言分庭抗礼。
经过博客介绍一下他的做用。后面用到的vue就是基于node环境开发的，因此必须把这个环境配置好。具体安装步骤我就不写了，看一下其余大佬的安装教程，会比我讲的更清楚。根据博客内容，把node配置很久能够进入下一步了。
2.vue.js
vue是一套用于构建用户界面的渐进式框架。与其它大型框架不一样的是，Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。
vue框架是国人尤雨溪开发的，中文资料多，国内用户群体不少，在百度随便一搜都有这些资料，相比于react来讲入门比较容易。
咱们在日常学习可视化的时候，直接用JavaScript来写echarts和d3就能够了，对于入门级的同窗来说，框架这东西后面学也不要紧。但在作比赛或者开发一套可视分析系统的时候，建议仍是用vue来写，这样不只能够对系统进行模块化开发，并且有利于系统性能的提高。
记得以前参加一个比赛，由于没有用框架，全部代码都放在一个HTML文件中，致使运行很慢，系统体验感不好。全部在日常时间能够了解一下vue框架的使用。
因为vue的教程在网上不少，我就很少介绍了。就贴上vue的官方网站和GitHub。