echart动态加载数据之饼状图

    
layui.define('echarts', function(exports) {
    var echarts = layui.echarts,
        $ = layui.jquery;
    var myecharts = echarts.init(document.getElementById('echarts'));
    myecharts.showLoading({
        text : "正在努力的读取数据中。。。。。",
    })
    var option = {
            title: {
                text: '商户申请积分分布图',
                subtext: '数据来源商户',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: []
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data : [],
                /*data: [
                    { value: 335, name: '熟食' },
                    { value: 310, name: '水产' },
                    { value: 234, name: '蔬菜' },
                    { value: 135, name: '肉品' },
                    { value: 1548, name: '面包' }
                ],*/
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        $.ajax({
            type : "post",
            async : false, //同步执行
            url : contextpath + '/merchantintegral/integralcountlist?&time='+ new Date().getTime(),
            dataType : "json", //返回数据形式为json
            success : function(result) {
                if(result){
                    //初始化option.xAxis[0]中的data
                    for(var i=0;i<result.length;i++){
                      option.legend.data.push(result[i].name);
                    }
                    //初始化option.series[0]中的data
                    for(var i=0;i<result.length;i++){
                        /*option.series[0].data['value'].push(result[i].integral_val);
                            option.series[0].data['name'].push(result[i].name);*/
                        option.series[0].data.push({'name':result[i].name,'value':result[i].count});
                    }
                    myecharts.hideLoading();    //隐藏加载动画
                    myecharts.setOption(option);
                }
            },
            error: function(errorMsg) {
                alert("图表请求数据失败啦!");
            }
        })
        exports('echart', {});
});

  • 1》饼状图series加载方式
 option.series[0].data.push({'name':result[i].name,'value':result[i].count})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容