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。