echart使用记录——版本2和3的一些区别

最新推荐文章于 2024-09-17 16:10:42 发布

yunjuant

最新推荐文章于 2024-09-17 16:10:42 发布

阅读量2.9k

点赞数 1

分类专栏： java 文章标签：浏览器 javascript echart

本文链接：https://blog.csdn.net/yunjuant/article/details/77744494

版权

java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近需要用图表展示一些数据，在页面展示两个饼状图即可。于是使用了echart3，功能很简单，但是其中遇到的一些小问题还是值得记录的。

初始效果如图

之后想在图例的地方加上人数

本来以为修改传入数组的字符串即可，但是浏览器报错

因为要求所有数据要在同一页面。所以试了在页面用table展示数据，但是不是很美观。

创建动态table的模板（这份是网上看到的，比较完整）

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function creatTable(){
            var div = document.getElementById("resultDiv");
            div.innerHTML = "";
            var row = document.getElementById("row").value;
            var col = document.getElementById("col").value;


            var table = document.createElement("table");
            table.setAttribute("border","1");
            table.setAttribute("width","100%");
            var tbody = document.createElement("tbody");
            table.appendChild(tbody);

            for(var i= 0 ;i<parseInt(row) ; i++){
                var tr = document.createElement("tr");
                for(var j =0 ; j<parseInt(col);j++){
                    var td = document.createElement("td");
                    td.innerHTML =  j +'';
                    tr.appendChild(td);
                }
                tbody.appendChild(tr);
            }

            div.appendChild(table);
        }
    </script>
</head>
<body>
  <table border="1">
      <tr>
          <td style="width: 100px;height: 40px;">行：</td>
          <td><input  id="row" type="text"/></td>

      </tr>
      <tr>
          <td>列：</td>
          <td><input id="col" type="text"/> </td>
      </tr>

      <tr><td colspan="2"> <input type="button" value="提交" οnclick="creatTable()"/> </td></tr>
  </table>

   <div id="resultDiv">

   </div>
</body>
</html>

后面查了半天，没有看到类似的问题。抱着试试看的心情试着换成了echart2，结果问题就这么解决了，echart3比2更加规范严格了，但是反而导致需求不能满足（虽然这个需求可能比较小众），浪费了不少时间有点郁闷。

用echart2之后，需要修改option里的一些属性。

1、 legend 里面的left ，top 等要用x，y代替，不然会无效。

2、遍历数据的问题

a $.each(data,function(key,value){});

b for (var i in data) {}

c for (var i = 0; i < data.length; i++) {}

在echart3时，使用方法a遍历，图表显示正常，但在echart2里虽然饼图显示正常，但是legend显示异常，如图没有颜色区分。

使用b方法，会导致一些数据设值出错，数据为数值型，但是显示NaN。

使用c方法，正常。

jsp代码如下

用到了定时刷新

<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
    	<script src="${_pluginPath}/echarts2/echarts-all.js"></script>
    	<style type="text/css">
    	 .myBtnDiv{
    position:absolute;
    	    top: 20px;left: 20px;
    }
    </style>
    </head>
    <body>
        <div id="pieEchartM" style="height: 540px; width: 47%;position: absolute;float: left;"></div>
        <div id="pieEchartP" style="margin-top:30px; width: 47%;height: 540px; width: 47%;margin-left: 700px;"></div>
    </body>
<script type="text/javascript">
	var webPath= "/" + window.location.pathname.split("/")[1];
//基于准备好的dom，初始化echarts图表
var mobileChart =echarts.init(document.getElementById('pieEchartM'));
var pcChart =echarts.init(document.getElementById('pieEchartP'));
//全局参数
var temps={
		seriesMoData : new Array(),
	   	seriesPcData : new Array(),
	   	timing:60*30*1000 ,//定时
}

var ajaxTrigger = function(url,params,successFunc,errorFunc){
       if(!errorFunc){
           errorFunc=function(){};
       }
       $.ajax({
           url: url,
           type: 'post',
           data: params,
           dataType : "json",
           success: function(data){
               successFunc(eval(data));
           },
           error: errorFunc
       });
   };
   
 //获取在线人数
   getOnlineCount();
 //定时刷新
   window.setInterval("getOnlineCount()",temps.timing);

  
  //获取在线人数
  function getOnlineCount(){
	  debugger
	  var url = "url地址";
	  ajaxTrigger(url,null,function(data){
		  if(data != null){
			  debugger
			  		temps.seriesMoData = data.mobiles;
			  		temps.seriesMoData.title = "手机端在线人数统计图";
			  		temps.seriesPcData = data.pcs;
			  		temps.seriesPcData.title = "电脑端在线人数统计图";
			  	
		  }
		  var optionDataM = getOptionByStat(temps.seriesMoData);
		  	mobileChart.setOption(optionDataM, true);
			var optionDataP = getOptionByStat(temps.seriesPcData);
		  	pcChart.setOption(optionDataP, true);
	  });
	  
  }
   
   
   function getOptionByStat(onlines) {
   	var sumData = 0; //总人数
   	var onlinesData = new Array(); //area and count数据
   	var legendData = new Array(); //legend data 
   	for (var i = 0; i < onlines.length; i++) {
   		var areaName = onlines[i].areaName;
   		var count = onlines[i].count;
   		onlinesData[i] = {value:count, name: areaName + '(' + count + '人)'};
    	legendData[i] = areaName + '(' + count + '人)';
    	sumData+=count;
	}
   	
   	var option = {
       		title : {
       			   y:30,
                   text: onlines.title,
                   subtext: '在线总人数：'+sumData+'人',
                   subtextStyle: {
                	   fontSize : 13
                	   },
                   x:'center'
               },
               legend: {
                   orient : 'vertical',
                   x : 'left',
                   y :30,
                   data:legendData
               },
               tooltip : {
                   trigger: 'item',
                   formatter: "{a} <br/>{b} : {c} ({d}%)"
               },
               calculable : true,
               series : [
                         {
                             name: '在线人数',
                             type: 'pie',
                             radius : '60%',
                             center: ['60%', '60%'],
                             data:onlinesData
                         }
                     ]
       	};
   	return option;
   }
   
</script>
</html>