ECharts是由百度打造的一個純javascript的圖示庫，很好用。

 1. echarts檔案的引入,在javascript塊引入，src按需修改

<script type="text/javascript" src="./res/js/echarts.js"></script>

 2. 基於準備好的dom，初始化echarts

js: var myChart = echarts.init(document.getElementById('main'));
html: <div id="main" style="width:900px;height:500px;"
 
></div>

3.指定圖表的配置項和資料

option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 座標軸指示器，座標軸觸發有效
            type : 'shadow'        // 預設為直線，可選為：'line' | 'shadow'
        }
    },
    legend: {
        data:['電話','郵件','廣告','視訊','搜尋']
    },
    grid: {
        left: '3%'
 
,
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['週一','週二','週三','週四','週五','週六','週日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'電話'
 
,
            type:'bar',
            data:[32, 33, 30, 33, 39, 30, 30]
        },
        {
            name:'郵件',
            type:'bar',

            data:[20, 12, 101, 14, 30, 30, 20]
        },
        {
            name:'廣告',
            type:'bar',

            data:[22, 18, 19, 23, 29, 35, 30]
        },
        {
            name:'視訊',
            type:'bar',

            data:[10, 22, 21, 14, 10, 30, 10]
        }
    ]
};

4.ajax動態獲取資料設定引數

 $.ajax({
                type: 'get',
                url: URL,
                data: data,
                dataType: "json",
                success: function (res) {   //這裡只設置月份          
                    myChart.setOption({
                        xAxis:{
                            data:res.Ymouth
                        }                      
                    });

                }
            });

5. 使用剛指定的配置項和資料顯示圖表

 myChart.setOption(option,true);

6.ajax傳遞資料

原始資料圖片 :

動態資料圖片: