利用echarts做圖表統計

以項目中的扇形統計圖為例：

首先，第一步：

　　引入外部echarts.js文件

其次，第二步：

　　HTML代碼塊

<div class="count-body-con count-tj">
　　　　<div class="float-e-margins">
　　　　　　<div class="ibox-title">
　　　　　　　　<h3 style="letter-spacing: 3px;text-align: center">某某情況統計</h3>
　　　　　　</div>
　　　　　　<div class="ibox-content" style="padding:0 0;text-align: center">
　　　　　　　　<div class="flot-chart-content" id="pie2">

　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　</div>

 

最后，第三步：

　　js代碼塊

require.config({
    paths: {
        echarts: '<%=path%>/resources/js'
    }
});
require(
        [
            'echarts',
            'echarts/chart/pie'   // 按需加載所需圖表，如需動態類型切換功能，別忘了同時加載相應圖表
//            'echarts/chart/line',   // 按需加載所需圖表，如需動態類型切換功能，別忘了同時加載相應圖表
//            'echarts/chart/bar'
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('pie1'));
            var option = {
//                title: {
//                    text: '框架自帶的統計標題',
//                    textStyle: {
//                        fontSize: 24,
//                        fontWeight: 'normal',
//                        color: '#2E9ED5'
//                    },
//                    x: 'center'
//                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c}人 ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    y: 'top',
                    left: 'left',
                    data: ['情況1', '情況2', '情況3']
                },
                calculable: false,
                series: [
                    {
                        name: '人數',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            {value:${后台統計情況1的數據}, name: '情況1'},
                            {value:${后台統計情況2的數據}, name: '情況2'},
                            {value:${后台統計情況3的數據}, name: '情況3'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            window.onresize = myChart.resize;
        }
    );

 

效果：