ECharts使用中不出图

影非弦 发布于 2014/01/13 10:15
阅读 4K+
收藏 0

最近在使用ECharts进行报表统计开发,后台处理后传过来的参数

var data={

    "一号传感器":{"2014-01-03":14.73,"2014-01-04":19.81,"2014-01-05":16.32,"2014-01-06":20.58,"2014-01-07":16.78,"2014-01-08":9.79},

    "二号传感器":{"2014-01-03":13.74,"2014-01-04":18.38,"2014-01-05":15.03,"2014-01-06":19.13,"2014-01-07":15.62,"2014-01-08":8.96},

    "三号传感器":{"2014-01-03":16.67,"2014-01-04":21.75,"2014-01-05":18.24,"2014-01-06":22.58,"2014-01-07":18.8,"2014-01-08":11.68},

    "四号传感器":{"2014-01-03":13.04,"2014-01-04":17.65,"2014-01-05":14.55,"2014-01-06":18.46,"2014-01-07":14.73,"2014-01-08":8.54}

};

var myChart = ECharts.init(document.getElementById('main'));  
setoptiondata(data,myChart);

其中ECharts中的一部分:

var option = {  
               legend : { // 图例配置  
                   orient : 'horizontal', //布局方式,默认为水平布局,可选为:'horizontal' | 'vertical'  
                   x : 'center', //水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)  
                   y : 'top', //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)  
                   backgroundColor : 'rgba(0,0,0,0)', //图例背景颜色,默认透明  
                   borderColor : '#ccc', //图例边框颜色  
                   selectedMode : true, //图例不能点了(false)  
                   padding : 5, // 图例内边距,单位px,默认上下左右内边距为5  
                   itemGap : 10, // Legend各个item之间的间隔,横向布局时为水平间隔,纵向布局时为纵向间隔  
                   data : []  
               },  
               toolbox : { //小工具  
                   show : true,  
                   feature : {  
                       mark : true,  
                       dataZoom : true,  
                       dataView : true,  
                       magicType : [ 'line', 'bar' ],  
                       restore : true,  
                       saveAsImage : true  
                   }  
               },  
               dataZoom : { //缩略图  
                   show : true,  
                   realtime : true,  
                   start : 20,  
                   end : 80  
               },  
               tooltip : { // 气泡提示配置  
                   trigger : 'axis', // 触发类型,默认数据触发,可选为:'axis'  
               },  
 
               xAxis : [ // 直角坐标系中横轴数组  
               {  
                   type : 'category', // 坐标轴类型,横轴默认为类目轴,数值轴则参考yAxis说明  
                   boundaryGap : false, //数据从坐标轴顶开始  
                   data : []  
               } ],  
               yAxis : [ // 直角坐标系中纵轴数组  
               {  
                   type : 'value', // 坐标轴类型,纵轴默认为数值轴,类目轴则参考xAxis说明                  
                   boundaryGap : [ 0.1, 0.1 ], // 坐标轴两端空白策略,数组内数值代表百分比  
                   splitNumber : 4  ,
               // 数值轴用,分割段数,默认为5 
                precision : 2
               } ],  
               series : [  
 
               ]  
           };  
       var xname = [];  
       for ( var key in jsonranklist) {  
           var databand = [];  
           if (key == "一号空调") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
                   xname.push(datakey);  
               }  
           }  
           if (key == "二号空调") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }
           if (key == "三号空调") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "一号传感器") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "二号传感器") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "三号传感器") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "四号传感器") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "UPS") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "1号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "2号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "3号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "4号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "5号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "6号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "7号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "8号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "9号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "10号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "11号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "12号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "13号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "14号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "15号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "16号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "17号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
           if (key == "18号机柜") {  
               for ( var datakey in jsonranklist[key]) {  
                   databand.push(jsonranklist[key][datakey]);  
               }  
 
           }    
 
           option.legend.data.push(key);//追加数据  
           seriesx = {  
               name : key,  
               type : 'line',  
               data : databand,  
               itemStyle : {  
                   normal : {  
                       areaStyle : {}  
                   }  
               },  
               stack : 'a'  
           };  
           option.series.push(seriesx);  
 
       }  
       option.xAxis[0].data = xname;  
       myChart.setOption(option,true);  
   }  

结果出现的情况是图不出来

查看数据发现如下:

我也不熟悉ECharts,不知道这是什么原因,请有经验的指教!

加载中
0
Kener-林峰
Kener-林峰

怎么加载的?模块化吧?入口的require没有引用图表吧 

require(
    [
        'echarts',
        'echarts/chart/line',   // 按需加载所需图表
        'echarts/chart/bar'
    ],
    function (ec) {
        var myChart = ec.init(domMain);
        var option = {
            ...
        }
        myChart.setOption(option);
    }
);

返回顶部
顶部