一、Echarts的介紹

ECharts開源來自百度商業前端資料視覺化團隊，基於html5 Canvas，是一個純Javascript圖表庫，提供直觀，生動，可互動，可個性化定製的資料視覺化圖表。創新的拖拽重計算、資料檢視、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。—— 大資料時代，重新定義資料圖表的時候到了（ps：來自網路）
自己最近使用echarts對中國石化客戶關係進行視覺化分析，結合官網學習了ECharts 中實現非同步資料，然後自己作為小白在這裡總結下使用方法。
官方文件：Echart3官方文件.Echart2官方文件.

二、Echarts的使用

1、官方下載

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、最終效果