前言：

ECharts，縮寫來自Enterprise Charts，商業級資料圖表，一個純Javascript的圖表庫，可以流暢的執行在PC和移動裝置上，相容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等）。支援折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和絃圖、力導向佈局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、資料區域、時間軸、工具箱等7個可互動元件，支援多圖表、元件的聯動和混搭展現。

在專案中也對它進行了實踐，這次以餅圖為例，一起看看吧，簡單易用，效果還很不錯。

首先：

引入和ECharts相關的js檔案

<script type="text/javascript" src="/Scripts/echarts-all.js"></script>

頁面核心：

<div data-options="region:'west',split:true,title:'Demo',collapsible:false"  style="width: 50%;" id="chart0">
</div>

js核心：

測試版本：

可以藉助官網很好的做到測試的效果，改動程式碼檢視自己想要的效果---種子。

var option = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['穀類','瓜果蔬菜類','肉類','奶製品豆製品類','油脂類']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'center',
                        max: 1548
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'食物分類',
            type:'pie',
            radius : ['50%', '70%'],
            itemStyle : {
                normal : {
                    label : {
                        show : false
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis : {
                    label : {
                        show : true,
                        position : 'center',
                        textStyle : {
                            fontSize : '30',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
            data:[
                {value:335, name:'穀類'},
                {value:310, name:'瓜果蔬菜類'},
                {value:234, name:'肉類'},
                {value:135, name:'奶製品豆製品類'},
                {value:1548, name:'油脂類'}
            ]
        }
    ]
};
                    

但實際上，我們在實現圖表的時候都是通過條件篩選，動態載入出資料，生成對應的圖，這時候就要藉助AJax來實現，更方便跟靈活。同時也可以通過demo的測試去除一些不必要的樣式或者新增自己想要的效果，都是可以的。

JS:

//統計圖載入js
function DemoChart() {
    var strTime_Begin = $('#search_txtTime_Begin').datebox('getValue');
    var strTime_End = $('#search_txtTime_End').datebox('getValue');

    var foodtype = [];//存放食物類別

    $.ajax({
        url: '/Statistics/queryFoodType',
        type: 'post',
        cache: false,
        data: {
            strTime_Begin: strTime_Begin,
            strTime_End: strTime_End
        },
        success: function (result) {
            var obj = eval('(' + result + ')');
            //請求成功時執行該函式內容，result即為伺服器返回的json物件
            for (var i = 0; i < obj.length; i++) {
                foodtype.push(obj[i].name)
            }
            var option0 = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: foodtype,//1、圖注，資料格式見上面測試版本js
                    show: true     //顯示
                },
                calculable: true,
                series: [
                    {
                        name: '食物分類',
                        type: 'pie',  //圖的型別
                        radius: ['50%', '70%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    position: 'center',
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            }
                        },
                        data: obj  //繪製圖的資料來源，資料格式見上面測試版本js
                    }
                ]
            }
            var myChart0 = echarts.init(document.getElementById('chart0'));//chart0很關鍵，和頁面標籤id要一致
            myChart0.setOption(option0);
        },
        error: function (errorMsg) {
            //請求失敗時執行該函式            
            $.messager.alert("系統提示", "圖表請求資料失敗!");
            myChart0.hideLoading();
        }
    });

}

效果：

總結：

ECarts是一直純JS的圖表庫，根據官網的例項可以很快的上手，希望大家可以嘗試，讓資料統計的顯示效果更加明瞭，形式更加多樣。