echarts中option选项的获取

最新推荐文章于 2026-07-14 22:56:40 发布

原创最新推荐文章于 2026-07-14 22:56:40 发布 · 2.1w 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

echarts

在使用echarts制作中国地图柱状图时遇到问题，尝试将后台数据赋值给图表失败。通过深入理解echarts的getOption方法，发现其返回的是option的克隆，导致不断创建新对象而未更新数据。解决方案是先保存option克隆，然后在循环中修改并使用setOption更新，从而实现数据正确显示。

做了一个在中国地图上各个省显示柱状图的案例，发现从后台读取数据想要给柱状图赋值的时候一直赋不进去，最后看了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);
        };
        
    }