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}]}

原文地址：https://www.cnblogs.com/zhengwei-cq/p/8215069.html