鍍金池/ 問答/HTML/ ecahrts 動態(tài)加載數(shù)據(jù)legend不顯示.

ecahrts 動態(tài)加載數(shù)據(jù)legend不顯示.

用百度的echarts時(shí),ajax異步加載數(shù)據(jù),圖例不顯示,但是將option對象瀏覽器的控制臺打印出來看時(shí)沒毛病,求大神幫幫忙啊
這是我前臺代碼

<script type="text/javascript">
            
             var worldMapContainer = document.getElementById('lineChart');
            
            //用于使chart自適應(yīng)高度和寬度,通過窗體高寬計(jì)算容器高寬
            var resizeWorldMapContainer = function () {
                worldMapContainer.style.width = window.innerWidth+'px';
                worldMapContainer.style.height = window.innerHeight+'px';
            };
            //設(shè)置容器高寬
            resizeWorldMapContainer();
             // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例
            var myChart = echarts.init(worldMapContainer);
             // 指定圖表的配置項(xiàng)和數(shù)據(jù)
            
            option = {
              
                tooltip : {
                    trigger: 'axis'
                },
                legend:{
                    data:[]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : []
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value}'
                        }
                    }
                ],
                series : []
            };
            
            
            //用于使chart自適應(yīng)高度和寬度
            window.onresize = function () {
                //重置容器高寬
                resizeWorldMapContainer();
                myChart.resize();
            };
            myChart.showLoading();    //數(shù)據(jù)加載完之前先顯示一段簡單的loading動畫
           $(function(){
                var subitemId=$("#subitemId").val();
                var date=$("#date").val();
            
                var serie=[];
                var legend=[];
                var timeArr=[];
                $.ajax({
                    type: 'GET',
                    url : '${ctx}/sys/subitemstatistics/getLineCharts?subitemId='+subitemId+'&date='+date,
                    dataType: 'json',
                    success:function(temp){
                        debugger;
                        for(var i=0;i<temp.length;i++){
                            legend.push(temp[i].name);
                            timeArr=temp[i].time;
                            
                            var item={
                                name:temp[i].name,
                                type:'line',
                                data:temp[i].value,
                            }
                            serie.push(item);
                        }
                        
                        //legend
                        option.legend={
                            orient:'vertical',  
                            x:'left', 
                            data: legend,
                        };
                        
                        //series
                        option.series=serie;
                        
                        //xAxis
                        option.xAxis[0]['data']=timeArr;
                        
                        //option.title={text:'asdasd'};
                        
                        console.log(option)
                        
                        myChart.hideLoading();    //隱藏加載動畫
                         
                        myChart.setOption(option,true); // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
                        
                            
                    },
                    
                    error:function(){
                        debugger;
                    },
                    
                    complete:function(){     
                        //不管數(shù)據(jù)接口成功或異常,都終于載入提示      
                        myChart.hideLoading();//停止動畫載入提示 
                    }
                })
          
            })
            
        </script> 

這是瀏覽器控制臺打印出來的option對象,貌似沒啥問題啊,值都設(shè)置進(jìn)去的

圖片描述

整體的效果如下

clipboard.png

回答
編輯回答
護(hù)她命

clipboard.png

你看看上面的元素lineChart是否設(shè)置寬高,echarts圖標(biāo)一定要設(shè)置寬高不然是不顯示圖標(biāo),你可以查看元素看看echarts是不是加載進(jìn)去了。

2018年6月30日 06:48