echart使用记录——版本2和3的一些区别
2017-08-31 11:51
471 查看
最近需要用图表展示一些数据，在页面展示两个饼状图即可。于是使用了echart3，功能很简单，但是其中遇到的一些小问题还是值得记录的。
初始效果如图
之后想在图例的地方加上人数
本来以为修改传入数组的字符串即可，但是浏览器报错
因为要求所有数据要在同一页面。所以试了在页面用table展示数据，但是不是很美观。
创建动态table的模板（这份是网上看到的，比较完整）
后面查了半天，没有看到类似的问题。抱着试试看的心情试着换成了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>
初始效果如图
之后想在图例的地方加上人数
本来以为修改传入数组的字符串即可，但是浏览器报错
因为要求所有数据要在同一页面。所以试了在页面用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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 不同python版本在使用pyserial的一些使用区别
- 记录一下使用j2ee版本的eclipse的一些心得
- 在android4.4中webview的使用相对于之前版本的一些区别
- Fedora 7上DNS服务器和之前一些版本的区别
- Oracle SQLPlus 一些使用经验记录(设置环境变量和字符串比较)
- 初学eclipse，记录一些有关eclipse IDE使用的东东
- VSS实现版本控制管理的一些使用方法
- 记录一些BCB6的使用心得
- Linux命令的一些记录（四）：rpm命令的一些使用
- C++备忘录(记录一些不常使用的语法规则)
- 在Visual Studio中使用ZedGraph控件的一些记录
- (水文，内容比较初级，高手勿进)使用SVN版本控制之后常见的一些问题01
- 记录：树形控件的一些使用方法（和sql server 结合显示）
- 记录: 查看网站使用的Framework版本
- .Net中VSS实现版本控制管理的一些使用方法
- 在vs中使用ZedGraph控件的一些记录
- 使用中遇到的sh与csh的一些区别
- Windows XP Professional版本与Home版本的一些区别
- c# 中一些方法使用的区别
- .Net中VSS实现版本控制管理的一些使用方法