一、Echarts的介紹
ECharts開源來自百度商業前端數據可視化團隊，基於html5 Canvas，是一個純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。—— 大數據時代，重新定義數據圖表的時候到了（ps：來自網絡）
自己最近使用echarts對中國石化客戶關系進行可視化分析，結合官網學習了ECharts 中實現異步數據，然后自己作為小白在這里總結下使用方法。
官方文檔：Echart3官方文檔.Echart2官方文檔.
二、Echarts的使用
1、官方下載
Echarts3.0的完整版下載
2、頁面引入Echart.js和JQuery(異步加載使用)
<script src="../js/jquery-3.1.1.min.js"></script> <script src="../js/echarts.min.js"></script>並准備一個div容器
<style>#main{width: 600px;height: 400px;}</style> <div id="main"></div>3、echart實例初始化設置，然后異步請求數據，畫一張柱狀圖
關於幾個配置項的解釋：
title：圖片的名稱
legend：圖例組件，可以通過點擊圖例控制哪些系列不顯示
xAxis：直角坐標系 grid 中的 x 軸
yAxis：直角坐標系 grid 中的 y 軸
series：系列列表。每個系列通過 type 決定自己的圖表類型，這里是柱狀圖‘bar’
<script>
myChart=echarts.init(document.getElementById('main'));//獲取容器 //先設置完其它的樣式，顯示一個空的直角坐標軸，然后獲取數據后填入數據 myChart.setOption({ title: { text: '異步數據加載示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [] }] }); // 異步加載json格式數據 $.getJSON('http://localhost:63342/echart/loaddata/client.php',function(data){ myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根據名字對應到相應的系列 name: '銷量', data: data.data }] }); }); </script> </body> </html>4、通過PHP進行后台數據處理：client.php
<?php #連接數據庫 $conn=mysqli_connect('localhost','root','root','demo'); if($conn->connect_errno){ die('連接失敗'.$conn->connect_errno); } #設置字符集 $conn->set_charset('utf8'); #查詢數據 $sql='select * from clothes'; $result=mysqli_query($conn,$sql); #將數據轉化成json格式 $json_data=array('categories'=>array(),'data'=>array()); while ($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){ array_push($json_data['data'],intval($row['data']));//將字符串轉化為數值 array_push($json_data['categories'],$row['categories']); } echo json_encode($json_data);//打印編碼后的json字符串*/ ?>其中段代碼，主要是將數據庫的對應字段的每一列提取出來，然后放在關聯數組里
while ($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){ array_push($json_data['data'],intval($row['data']));//將字符串轉化為數值 array_push($json_data['categories'],$row['categories']); }最后這是我們想要的json數據格式
想要的數據格式
5、數據庫設計
注意：這里“data”是整形，要使用intval()方法轉化下
數據庫數據
6、最終效果
效果
原文鏈接：http://www.jianshu.com/p/5c0d09f30b5a