最近使用到了 百度的 Echarts 數據可視化工具，這里簡單介紹如何快速上手。
一.下載
這里選擇目前最新版本，4.2.1
地址：https://github.com/apache/incubator-echarts/archive/4.2.1.zip
在解壓出來的文件夾里的 dist 目錄里可以找到最新版本的 echarts 庫。
二.上手
不管你使用那種 js 語言，要想實現功能，最核心的就是 下面的三個步驟。
引入 Echarts 之前，要引入 jquery 庫
1.引入 ECharts
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html>
2.准備容器
<body> <!-- 為 ECharts 准備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body>3.繪制圖表
通過 echarts.init 方法初始化一個 echarts 實例並通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。
<!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>最終效果
三、使用
到這里，你可以在自己的項目中實現了簡單的引入，但是具體實現還要根據自己的業務需求進行定制。
這是官方提供的幾個簡單的實例：https://echarts.baidu.com/examples/，可以根據需求，選擇不同的展示類型。
這些例子都可以點開，在線編輯，實時展示在線修改效果。
1.數據異步加載
入門示例中的數據是在初始化后setOption中直接填入的，但是很多時候可能數據需要異步加載后再填入。ECharts 中實現異步數據的更新非常簡單，在圖表初始化后不管任何時候只要通過 jQuery 等工具異步獲取數據后通過 setOption 填入數據和配置項就行。
先設置完其它的樣式，顯示一個空的直角坐標軸，然后獲取數據后填入數據。
不管使用那種方式，最關鍵的的就是 一定要等到 <div id="main" style="width: 600px;height:400px;"></div> 渲染完成！！
方式一：
var myChart = echarts.init(document.getElementById('main')); // 顯示標題，圖例和空的坐標軸 myChart.setOption({ title: { text: '異步數據加載示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [] }] }); // 異步加載數據 $.get('data.json').done(function (data) { // 填入數據 myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根據名字對應到相應的系列 name: '銷量', data: data.data }] }); });方式二：
var myChart = echarts.init(document.getElementById('main')); // 顯示標題，圖例和空的坐標軸 var option = { title: { text: '異步數據加載示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [] }] }; // 異步加載數據 $.get('data.json').done(function (data) { // 填入數據,根據返回的data里面包含的內容設置 option.xAxis.data = data.categories; option.series[0].data = data.data; myChart.setOption(option); });注意：這里的 series 是一個數組，后台賦值的時候要注意數值的對應。
說明：x軸與 y軸 數據的對應，其實就是 option.xAxis.data 與 option.series[0].data 數值的對應，這兩個數組的長度是一樣的，數據也是一一對應的 比如：xAxis.data[0], 對應 series[0].data[0]，只要后台對應好數據就可以了。
2.loading 動畫
如果數據加載時間較長，一個空的坐標軸放在畫布上也會讓用戶覺得是不是產生 bug 了，因此需要一個 loading 的動畫來提示用戶數據正在加載。
ECharts 默認有提供了一個簡單的加載動畫。只需要調用 showLoading 方法顯示。數據加載完成后再調用 hideLoading 方法隱藏加載動畫。
myChart.showLoading();
$.get('data.json').done(function (data) { myChart.hideLoading(); myChart.setOption(...); });3.API
官方地址：https://www.echartsjs.com/api.html#echarts
init：創建一個 ECharts 實例，返回 echartsInstance，不能在單個容器上初始化多個 ECharts 實例。
getInstanceByDom ：獲取 dom 容器上的實例。
多次調用初始化代碼時，可以獲取容器實例，沒有獲取到，再初始化，防止初始多個實例。
var myChartPro = echarts.getInstanceByDom(document.getElementById('projectInvest')); if(myChartPro === undefined ){ myChartPro = echarts.init(document.getElementById('projectInvest')); }4.配置項
https://www.echartsjs.com/option.html#title
上面代碼的參數，都是可以在這里查到的，並且可以根據自己的需求定制。
常用配置：
導出圖片，數據視圖，折線 和 柱狀圖
toolbox: {
feature: { saveAsImage: { title:'導出' }, dataView:{ readOnly:true }, magicType: { type: ['line', 'bar'] } } },類似這樣：
區域拖動 ：分為內部（看不到滾動條）和 外部（如下）
dataZoom:[{
type:'slider', minValueSpan:9, maxValueSpan:19, endValue:19 }],類似這樣：
x軸設置 :
interval ：所有數據都顯示 rotate：字體傾斜，防止重疊
xAxis: {
name:'名稱', data: [], axisLabel:{ interval:0, rotate:-30 } },類似這樣：
四、總結
以上內容都可以在官網查到，上手一個新技術最快的就是參看官方文檔，看不懂的可以再去搜索，加深理解。
這里貼 Echarts,常用的文檔地址：
上手教程：https://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts