echart使用记录——版本2和3的一些区别
2017-08-31 11:51
477 查看
最近需要用图表展示一些数据,在页面展示两个饼状图即可。于是使用了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实现版本控制管理的一些使用方法