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

来源：互联网发布：网站sql注入检测编辑：程序博客网时间：2024/05/28 01:35

最近需要用图表展示一些数据，在页面展示两个饼状图即可。于是使用了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="提交" onclick="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>

阅读全文

1 0