還在用excel做資料視覺化？
基本所有人接觸資料視覺化的第一步都是excel圖表，不過基本也就止步於此。每天來來回回就柱狀圖、餅圖，做的人不吐，看的人也快吐了。
今天就介紹一款資料視覺化工具及其基本原理和使用方法。先看幾張圖感受下，重要的是這些圖可以動，可以動的圖表誒，看了很有感覺有沒有。動態圖表需要用html格式來實現，不會的話只能截圖來用。不過樣式繁多，截圖也還是可以接受的。
image
image
這款工具叫ECharts，百度出品，網址： https://echarts.baidu.com/examples/index.html 。同樣還有另外一款簡化版的叫百度圖說，對於新手比較友好，不過支援的圖表較少。
ECharts用的是基於Elasticsearch自有的查詢語法DSL，和CSS有點像，如果你把它當做CSS來用也沒多大問題。同時，還使用了JS，不過基本是匯入JS檔案來使用，不用瞭解太多，CV下去就是，除非ECharts上沒有你想要的圖表或效果（這個基本不存在，官方和社群的圖表組合起來可以滿足絕大多數的製表需求）。
建議上手前可以先看下官方的教程，接下去我也會以自己理解的來講，可以根據哪種比較好理解看哪種（純粹個人理解，理解錯了輕噴）。沒有基礎的也沒關係，知道里面的各類單詞是什麼意思，也可以在原有圖表的基礎上進行修改。
image.png
隨便點一個圖表進去，你會看到介面分為兩個部分，左邊為程式碼部分，右邊為視覺化圖表。點選右下角的Download可以下載html格式，可以直接在瀏覽器中開啟。
左側的程式碼是包含在<script>標籤內的，修改“：”後面的引數，圖表會有相應的變化。下面就以上圖為例， 解析其程式碼含義，程式碼是完整的html格式， 具體看“//”和!-- 內的註釋 ，建議在電腦端觀看。
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0"> <!--定義容器高度及外邊距-->
<div id="container" style="height: 100%"></div><!--定義圖表的高度，多個圖表可用px等具體單位，要注意適配。此處ID的值為唯一，如果有多個圖表，要設定不同的值。-->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<!--
上面幾個 script 均為實現效果所需插入的檔案，多個圖表的話，僅需插入這5個即可，無需重複插入。
-->
<script type="text/javascript">// 此處為實現效果所需，不同圖表，具體內容不同。
var dom = document.getElementById("container"); //獲取ID，此處（）內的值要和ID一致
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {//標題
text: '深圳月最低生活費組成（單位:元）',//標題文字
subtext: 'From ExcelHome',//子標題
sublink: 'http://e.weibo.com/1341556070/AjQH99che'//子標題關聯的網址
},
tooltip : {
trigger: 'axis',
axisPointer : {// 座標軸指示器，座標軸觸發有效
type : 'shadow'// 預設為直線，可選為：'line' | 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true//圖表邊距的開關，預設不修改
},
xAxis: {
type : 'category',//x軸的型別
splitLine: {show:false},
data : ['總費用','房租','水電費','交通費','伙食費','日用品數']//x軸的屬性，此處可根據x軸的不同進行修改
},
yAxis: {
type : 'value'
},
series: [
{
name: '輔助',
type: 'bar', //型別為柱狀圖
stack:'總量',//一個大的型別，在如堆積圖中，可錨定同一個型別來做堆積圖
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',//邊框顏色及透明度
color: 'rgba(0,0,0,0)' //圖表的顏色
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [0, 1700, 1400, 1200, 300, 0] //空值，該表格比較特殊，因為各柱狀y軸座標不同，需要通過不同數值來確定高度。如第一個是總額2900，那高度就是0；第二個數值是1200，那其高度就是2900-1200=1700；第三個數值，因為高度剩餘1700，而值是300，則高度就是1700-300=400，依此類推下去。
},
{
name: '生活費',
type: 'bar',
stack: '總量',
label: {
normal: {
show: true,
position: 'inside' //數值顯示樣式，inside顯示在柱狀內，outside顯示在柱狀外
}
},
data:[2900, 1200, 300, 200, 900, 300] //具體的值
}
]
};
;
if (option && typeof option === "object") {//必須有的
myChart.setOption(option, true);
}
</script>
</body>
</html>
其他的圖表也是這樣的流程，理解“：”前面單詞的意思，修改“：”後面的屬性。一個圖表理解了，基本所有的圖表都能理解，實在不能理解，建議先去試試百度圖說。