echart饼状图的学习

一、引入js文件

<!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
<script src="~/Scripts/esl.js" type="text/javascript"></script>

二、创建div

<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
<div id="chart1" style="100%;height:500px;border:1px solid #ccc">
</div>

三、在easyui datagrid 数据加载成功后展现报表

， onLoadSuccess: function (data) {
                    //拼接数据
                    var legenddata = '[';
                    var seriesdata = '[';

                    for (var i = 0; i < data.rows.length; i++) {
                        legenddata += '"' + data.rows[i].GROUPNAME + '",'
                        seriesdata += '{"name":"' + data.rows[i].GROUPNAME + '","value":' + data.rows[i].TOTALPEOPLE + '},';
                    }
                    if (legenddata.length > 1) {
                        legenddata = legenddata.substring(0, legenddata.length - 1);
                    }
                    if (seriesdata.length > 1) {
                        seriesdata = seriesdata.substring(0, seriesdata.length - 1);
                    }
                    legenddata += ']';
                    seriesdata += ']';

                    //展现报表
                    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js
                    require.config({
                        paths: {
                            echarts: '../../Scripts/echarts'
                        }
                    });

                    // Step:4 动态加载echarts然后在回调函数中开始使用
                    require(
                        ['echarts'],
                        function (ec) {
                            var myChart = ec.init(document.getElementById('chart1'));
                            var option = {
                                title: {
                                    text: '按会员购买次数推广统计',
                                    x: 'center',
                                    y: 'top'
                                },
                                tooltip: {
                                    show: true,
                                    formatter: "{a}<br/>{b}:{c}个({d}%)"
                                },
                                legend: {
                                    orient: 'vertical',
                                    x: 'right',
                                    y: 'center',
                                    data: $.parseJSON(legenddata)
                                },
                                toolbox: {
                                    show: true,
                                    feature: {
                                        mark: true,
                                        dataView: { readOnly: false },
                                        restore: true,
                                        saveAsImage: true
                                    }
                                },
                                calculable: true,
                                series: [
                                    {
                                        name: '会员分布',
                                        type: 'pie',
                                        center: [, 225],
                                        radius: [0, 110],
                                        data: $.parseJSON(seriesdata)
                                    }
                                ]
                            };

                            myChart.setOption(option);
                        }
                    );
                }