利用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;
        }
    );

效果：