ECharts 环形饼图 动态获取json数据

ECharts  环形饼图 动态获取json数据

效果图如下：



一.html部分

  <div id="secondPieChart" style="width:100%; height:400px;"></div>

二.js部分

<script type="text/javascript">

function loadOneColumn() {

    var myChart = echarts.init(document.getElementById('secondPieChart'));

    // 显示标题，图例和空的坐标轴

    myChart.setOption({

        color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色

        title: {

            text: '信息发布排行',

            subtext: '纯属虚构',

            x: 'center'

        },

        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: true

                    },

                    labelLine: {

                        show: false

                    }

                },

                emphasis: {

                    label: {

                        show: true,

                        position: 'center',

                        textStyle: {

                            fontSize: '20',

                            fontWeight: 'bold'

                        }

                    }

                }

            },

            data: []

        }]

    });

    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

    var names = [];    //类别数组（用于存放饼图的类别）

    var brower = [];

    $.ajax({

        type: 'get',

        url: 'json/chart/column/index_fbph.txt',//请求数据的地址

        dataType: "json",        //返回数据形式为json

        success: function (result) {

            //请求成功时执行该函数内容，result即为服务器返回的json对象

            $.each(result.list, function (index, item) {

                names.push(item.department);    //挨个取出类别并填入类别数组 

                brower.push({                    

                    value: item.num,

                    name: item.department

                });

            });

            myChart.hideLoading();    //隐藏加载动画

            myChart.setOption({        //加载数据图表                

                legend: {

                    data: names

                },

                series: [{

                    data: brower

                }]

            });

        },

        error: function (errorMsg) {

            //请求失败时执行该函数

            alert("图表请求数据失败!");

            myChart.hideLoading();

        }

    });

};

loadOneColumn();

</script>

三.json格式如下：

{"list":[{"department":"和平区","num":480},{"department":"河西区","num":380},{"department":"河东区","num":366},{"department":"河北区","num":320},{"department":"南开区","num":300}]}