您的位置:首页 > Web前端 > JavaScript

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

2017-08-31 11:51 477 查看
最近需要用图表展示一些数据,在页面展示两个饼状图即可。于是使用了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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息