eCharts使用小結之series中data屬性循環添加問題

直接上案例代碼餅狀圖:
<!--所屬單位佔比餅狀圖-->
<div id='ssdwPie' style='width:400px;height:300px;float:left;margin-left: 10%;'></div>
//所屬單位佔比餅狀圖
var ssdwPies = echarts.init(document.getElementById('ssdwPie'));
$.getJSON('${basePath}sys/tubiao/getSsdwPie', function (res) {//res:結構類型爲{[data數組],[zt數組]}
    var arry=[];
    for(var i=0;i<res.data.length;i++){
        var items={
            name:res.data[i],    //在此備註:在for循環外定義一個空數組,在for循環裏定義一個對象即:{name:XX,value:XX}
            value:res.zt[i]        之後將對象循環push到定義的arry數組內
        };
        arry.push(items);
    }
    var ssdwPie = {
        title: {
            text: '所屬單位維修佔比餅狀圖',
            subtext: '圖形如下',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: res.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: 'left',
                            max: 1548
                        }
                    }
                },
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        series: [
            {
                name: '所屬單位',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                data: arry----------->//注意:這裏data屬性的值爲對象 而不是拼接的字符串 內容結構爲:[{name:XX,value:XX}]
            }
        ]
    };
    //所屬單位佔比餅狀圖
    ssdwPies.setOption(ssdwPie);
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章