美文网首页
echart动态加载数据之饼状图

echart动态加载数据之饼状图

作者: vip4iPhonr | 来源:发表于2017-09-20 11:35 被阅读0次
        
    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})
    
    

    相关文章

      网友评论

          本文标题:echart动态加载数据之饼状图

          本文链接:https://www.haomeiwen.com/subject/ygonsxtx.html