Echarts+D3可视化开发工具集

一、前言

大学三年期间，学的很杂，但唯一坚持的就是在做可视化开发，有个负责任的指导老师很重要。因为即将大四，之后不一定会再继续朝这个方面学习，所以把之前参加比赛的经验总结一下，以及做一个笔记，之后忘记了还可以有资料可以查询。

所谓可视化，就是将大量的数据用图表形式展现出来，并分析其中的规律，得到一些分析结果，这就是所谓的可视分析。

可视化主要是基于JavaScript，无论怎么变着花样，就是感觉在学JavaScript。所以想学好可视化，前端知识很重要，起码最基本的语法要会，不然没办法玩下去。因为在可视的过程中就相当于在做网页，不断的去美化，使得你的系统让别人看起来舒服，美观和简洁。

二、Echarts.js库的使用

1.引用

Echarts是百度开发的一款可视分析库，从后缀名就可以看出，他是基于JavaScript的，由百度开发维护。

官网地址为Echarts，GitHub地址为Echarts GitHub。

做简单的页面引用echarts的方法是通过script标签来引用echarts.js库，然后在代码中对其初始化即可，使用方法比较简单。echarts.js这个库可以在官网中下载页面下载，在页面的最后处，点击下载源代码即可获得。或者下载GitHub上面的源码，echarts.js库在dist文件夹项下面。通过这两种方式可以获得最新版的echarts。

2.开发文档

在官网点击文档中的教程，可以简单了解echarts并绘制一个简单的图形，作为入门操作。

点击配置项，这是之后开发过程中所有绘图操作的讲解。而API这一栏是如果开发的图形涉及到点击事件以及其他方面就在这里面查看。

每个图形我们不可能一个一个自己敲出来，我们可以借用echarts官网的代码模板(官网–>实例–>官方实例)，然后选择自己想要的图形点击进去，就可以复制代码运行了。

如果这些代码面板不好看或者没有满足自己的需求，可以点击社区–>Gallery，这里面是网友开发的一些图形，比较美观，可以用来做自己的模板。

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.使用总结

国产货，中文资料多，百度一查，很多资源。集成度高，使用方便，便于入门，可视效果较好。

三、D3.js库的使用

1.引用

D3和echarts一样，也是一款可视图形库，也是基于JavaScript的，他是国外开发的。

官网地址为D3，GitHub地址为D3 GitHub。

使用方式好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相媲美的图形。一般的话做出来的图形都比较死板，灵活性和美化行都不行。

四、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，平常学习二者就都要学。

五、开发工具

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免费激活了。使用期限是一年，一年后又可以继续去认证，这样就可以使用正版工具了。

六、环境搭建

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。