echarts中option选项的获取

做了一个在中国地图上各个省显示柱状图的案例,发现从后台读取数据想要给柱状图赋值的时候一直赋不进去,最后看了echarts中getOption的说明才明白怎么一回事


//实时获取后台数据,使每个省点击弹出的都是该省的数据
        for(i = 0; i <34; i++){
        if(e.seriesIndex == i){
        //alert(e.seriesIndex);
        zhuzhuang.getOption().series[0].data.push(rawData[i][1]);
        zhuzhuang.getOption().series[0].data.push(rawData[i][2]);
        zhuzhuang.getOption().series[0].data.push(rawData[i][3]);
        //console.info(zhuzhuang.getOption().series[0].data);
        }
        zhuzhuang.setOption(zhuzhuang.getOption(),true);
        };


弹出push进去的数据,发现都有值,但放入option下面的data的时候怎么放都放不进去,最后才发现是zhuzhuang.getOption()的问题。


查看文档后发现zhuzhuang.getOption()的作用是——返回内部持有的当前显示option克隆,也就是说每次getOption()的时候都会复制一个已有的option,这么来说我上面就是重新创建了3个新的对象,setOption的时候又创建了一个新的对象,倒来倒去一直在复制对象,所以才一直没有值,后来改成下面这样就可以使用了。


//实时获取后台数据,使每个省点击弹出的都是该省的数据
        var op = zhuzhuang.getOption();//getOption: 返回内部持有的当前显示option克隆,只需复制一次即可
        for(i = 0; i <34; i++){
        if(e.seriesIndex == i){
        //alert(e.seriesIndex);
        op.series[0].data.push(rawData[i][1]);
        op.series[0].data.push(rawData[i][2]);
        op.series[0].data.push(rawData[i][3]);
        console.info(op.series[0].data);
        }
        zhuzhuang.setOption(op,true);
        };



这是完整的这块代码:

// 点击弹出生成柱状图
    function zhuZhuangTu(e) {
        var zhuzhuang = echarts.init(document.getElementById('zhuzhuang'));
        var option = {
            backgroundColor: 'rgba(255,255,255,.3)',
            legend: {
                data: ['早','中','晚']
            },
            xAxis: [
                {


                    type: 'category',
                    data: ['早','中','晚']
                }
            ],
            yAxis: [
                {
                    splitLine: {
                        show: false
                    },
                    type: 'value'
                }
            ],
            series: [
                {
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: function(params){
                                var colorList = ['#F75D5D','#59ED4F','#4C91E7'];
                                return colorList[params.dataIndex];
                            },
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#000'
                                }
                            }
                        }
                    },
                    data: []
                }
            ]
        };
        zhuzhuang.setOption(option);
        
        //实时获取后台数据,使每个省点击弹出的都是该省的数据
        var op = zhuzhuang.getOption();//getOption: 返回内部持有的当前显示option克隆
        for(i = 0; i <34; i++){
        if(e.seriesIndex == i){
        //alert(e.seriesIndex);
        op.series[0].data.push(rawData[i][1]);
        op.series[0].data.push(rawData[i][2]);
        op.series[0].data.push(rawData[i][3]);
        console.info(op.series[0].data);
        }
        zhuzhuang.setOption(op,true);
        };
        
    }





你可能感兴趣的:(echarts)