echart初始化空白问题,只显示HTML标签

AlvinHai 发布于 2016/05/03 15:00
阅读 432
收藏 0

@Kener-林峰 你好,想跟你请教个问题:

现状:我在js按钮事件中将链接指向jsp绘画图表,数据是在链接中传过去的,格式为json,当后台查询的是二十左右条数据时,可以正常显示;三十多条的时候是空白的,看源代码只有一个HTML标签;想不通是什么原因了,第一次使用。

这是jsp代码:

<!DOCTYPE html>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html>
<head>
<%
   String jsonStr = new String(request.getParameter("jsonStr")); 
%>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1" />
<script type="text/javascript" src="../../../js/echarts/echarts-all.js"></script>
<title>用户轨迹统计图</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="userTrackCount" style="height:950px; width:100%;"></div>
</body>

<script type="text/javascript">

 var lType = [ "访问量" ];//报表查看的对象
 var lUnit = [ "次数" ];//单位

 var modCodeArray = new Array();
 var timesArray = new Array();
 var jsonStr = '<%=jsonStr%>';
 var newJsonStr = decodeURI(jsonStr);
 
 JSON.parse(newJsonStr, function(key, value) {
  if (key != null && key != '') {
   modCodeArray.push(key);
   timesArray.push(value);
  }
 });
 
 var timesTwoArray = new Array();
 timesTwoArray[0] = timesArray;
 
 var lData = modCodeArray;
 var cDate = timesTwoArray;

 showChartSpec(lType, lUnit, lData, cDate, "userTrackCount");

 function showChartSpec(lType, lUnit, lData, cDate, objid) {
  // 基于准备好的dom,初始化echarts图表
  var myChart = echarts.init(document.getElementById(objid));

  var jsonTooltip = {
   trigger : "axis"
  };
  var jsonToolbox = {
   show : true,
   orient : "vertical",
   x : "right",
   y : "center",
   feature : {
    mark : {
     show : false
    },
    dataView : {
     show : false,
     readOnly : false
    },
    magicType : {
     show : true,
     type : [ "line", "bar" ]
    },
    restore : {
     show : true
    },
    saveAsImage : {
     show : false
    }
   }
  };
  var bCalculable = true;

  var arrLegend = new Array();//顶部扩展标签
  var len = lType.length;

  var arrXAxis = [ {
   type : "category",
   data : lData
  } ];//X轴标签信息
  var arrYAxis = new Array();//Y轴标签信息
  var arrSeries = new Array();//要展现的数据

  if (len > 0) {
   for ( var i = 0; i < len; i++) {
    //顶部扩展标签
    arrLegend.push(lType[i] + "(" + lUnit[i] + ")");

    //Y轴标签信息
    var jsonYObj = {
     type : "value",
     name : lType[i],
     axisLabel : {
      formatter : "{value} " + lUnit[i]
     }
    };
    arrYAxis.push(jsonYObj);
   }
  }

  var jsonLegend = {
   data : arrLegend
  };//顶部扩展标签

  //要展现的数据
  var jsonDataLine = {
   name : lType[0] + "(" + lUnit[0] + ")",
   type : "bar",
   data : cDate[0]
  };

  arrSeries.push(jsonDataLine);

  var option = {
   tooltip : jsonTooltip,
   toolbox : jsonToolbox,
   calculable : bCalculable,
   legend : jsonLegend,
   xAxis : arrYAxis,
   yAxis : arrXAxis,
   series : arrSeries
  };

  // 为echarts对象加载数据
  myChart.setOption(option);
 }
</script>

</html>

 

以下是问题补充:

@AlvinHai:已测 火狐,谷歌不管什么情况都是正常,只有ie下有问题,我切换到ie其他版本下都还是有这个问题的,我用的是ie10 (2016/05/03 15:36)
加载中
返回顶部
顶部