关于echarts的饼图默认不显示的问题

成都书生 发布于 2013/12/07 13:02
阅读 7K+
收藏 0

@Kener-林峰 你好,想跟你请教个问题:我才用Echarts,用的是1.3版本,发现有个奇怪的问题,就是我用他做柱状图发现可以直接显示出来,做饼图直接显示不出来,必须点击工具条上的刷新按钮才会立即绘图,请问这是怎么回事呢?

 

我的代码:

<div id="main_map_1" style="height:260px;border:1px solid #ccc;width: 48%; margin-left: 15px;float: left;"></div><div id="main_map_2" style="height:260px;border-top:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;width: 48%; margin-left: 0px; float: left;"></div>

 

<script src="js/esl.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
    require.config({
        paths:{
            'echarts':'js/echarts',
            'echarts/chart/bar' : 'js/echarts'
        }
    });
    require(
            [
                'echarts',
                'echarts/chart/bar'
            ],
            function(ec) {
                var mainChart1 = ec.init(document.getElementById('main_map_1'));
                var mainChart2 = ec.init(document.getElementById('main_map_2'));
                var option1 = {
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient : 'vertical',
                        x : 'left',
                        data:['已回款','未回款']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : false,
                            dataView : {readOnly: false},
                            restore : true,
                            saveAsImage : false
                        }
                    },
                    calculable : true,
                    title : {
                        text: '分析',
                        subtext: '',
                        x:'center',
                        textStyle:{
                            fontSize: 14,
                            fontWeight: 'bolder',
                            color: '#999'
                        }
                    },
                    series : [
                        {
                            name:'分析',
                            type:'pie',
                            radius : [0, 80],
                            center: ['50%', '50%'],
                            data:[
                                {value:900, name:'已回款',itemStyle:{
                                    normal:{
                                        color:'rgba(255,192,0,1)'
                                    }
                                }},
                                {value:1124.39, name:'未回款',itemStyle:{
                                    normal:{
                                        color:'rgba(0,176,240,1)'
                                    }
                                }}
                            ]
                        }
                    ]
                };

                var option2 = {
                    title : {
                        text: '分析2',
                        subtext: '',
                        x:'center',
                        textStyle:{
                            fontSize: 14,
                            fontWeight: 'bolder',
                            color: '#999'
                        }
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient : 'vertical',
                        x : 'left',
                        data:['已付款','未付款']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : false,
                            dataView : {readOnly: false},
                            restore : true,
                            saveAsImage : false
                        }
                    },
                    calculable : true,
                    series : [
                        {
                            name:'分析2',
                            type:'pie',
                            radius : [0, 80],
                            center: ['50%', '50%'],
                            data:[
                                {value:300, name:'已付款',itemStyle:{
                                    normal:{
                                        color:'rgba(247,150,70,1)'
                                    }
                                }},
                                {value:820.15, name:'未付款',itemStyle:{
                                    normal:{
                                        color:'rgba(146,208,80,1)'
                                    }
                                }}
                            ]
                        }
                    ]
                };
                mainChart1.setOption(option1,true);

                mainChart2.setOption(option2,true);

            }
    );
    });
</script>

 

加载中
0
纠结名字
// 其它图表类型类似
        paths:{
            'echarts':'js/echarts',
            'echarts/chart/bar' : 'js/echarts' // 使用类似方法加载pie
        }
    });
    require(
            [
                'echarts',
                'echarts/chart/bar' // 使用类似方法加载pie
            ],



f
foreverzfg
回复 @成都书生 : 如何解决的
Kener-林峰
Kener-林峰
回复 @雨路亦露 : 没上下文爱莫能助,见文档
雨路亦露
回复 @Kener-林峰 : 林峰你好,我就是从1.4.1升级到2.0.2,饼图就出不来了,这是什么情况导致的呢?
3Cc
3Cc
回复 @Kener-林峰 :我的也是这个问题,饼图要刷新两遍才出来,其它的图显示没有问题,这是为什么呢?
整多两够叉烧
回复 @成都书生 : 我也遇到同样的问题,饼图不显示而柱状图正常显示。请问你是怎样解决的,可以分享一下吗?谢谢!
下一页
0
g
gdoujkzz
你好,我也是同样的问题,请问你们怎么解决的
返回顶部
顶部