Echarts填充data

来源：互联网发布：java分布式高并发框架编辑：程序博客网时间：2024/05/18 02:35

通过ajax获取json 在success里面给option的属性进行设置值

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="/ailk-echars/echars/js/esl.js"></script>
<script src="/ailk-echars/echars/js/jquery.js"></script>
<script src="/ailk-echars/echars/js/echarts-option.js"></script>

<script type="text/javascript">

$(function(){

})

var echarts;
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/scatter',
'echarts/chart/k',
'echarts/chart/pie',
'echarts/chart/radar',
'echarts/chart/map',
'echarts/chart/chord',
'echarts/chart/force'

],
function(ec) {
map();
}
);

//map
function map(){
var myChart = require('echarts').init(document.getElementById('map'));
myChart.showLoading({
text: '正在努力的读取数据中...' //loading话术
});

var jsonArray=${(array)!};
myChart.hideLoading();

//optionMapPvn.dataRange={};
var data=[];
$.each(jsonArray,function(i,p){
data[i]={'name':p['areaname'],'value':p['value']};
});

var value=[ {name: '北京市',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆省',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '河南',value: Math.round(Math.random()*1000)},
{name: '云南',value: Math.round(Math.random()*1000)},
{name: '辽宁',value: Math.round(Math.random()*1000)},
{name: '黑龙江',value: Math.round(Math.random()*1000)},
{name: '湖南',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '山东',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '江苏',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '湖北',value: Math.round(Math.random()*1000)},
{name: '广西',value: Math.round(Math.random()*1000)},
{name: '甘肃',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙',value: Math.round(Math.random()*1000)},
{name: '陕西',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '贵州',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '青海',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '海南',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}];
optionMapPvn.legend.data=['总收入'];
optionMapPvn.series[0]['data']=value;
optionMapPvn.series[0]['name']='总收入';

myChart.setOption(optionMapPvn);

}


var kd=1;
var gh=1;
var yd=1;
function setChart(xdata,url,mychart){

optionBar.legend.data=xdata;

var data1=[];
var data2=[];
var data3=[];
mychart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
$.ajax({
url:url,
dataType:"json",
success:function(data){
$.each(data['output'],function(i,p){
data1[i]=p['xdata']; //sql 中查出来的属性名
data2[i]=p['valueb']; //同上
if(p['valuel']!=undefined){
data3[i]=p['valuel'];

}

});
mychart.hideLoading();
optionBar.xAxis[0]['data']=data1;
optionBar.series[0]['data']=data2;
optionBar.series[0]['name']=xdata[0];
if(data3.length!=0){
optionBar.series.push({
name:xdata[1],
type:'line',
data:data3
})
}
mychart.setOption(optionBar);
}
});
}

function onSelect(title){
var xdata=['落地百分比','总用户'];

if(title=='移动'){
var id="qryMblChar";
if(yd==2){
var myChart1 = require('echarts').init(document.getElementById(id));
var url="${contextPath}/echars/echars_index!qryMblChar.action";
setChart(xdata,url,myChart1);
}
yd++;
}
if(title=='固话'){
var id="qryFixChar";

if(gh==1){
var myChart2 = echarts.init(document.getElementById(id));
var url="${contextPath}/echars/echars_index!qryFixChar.action";
setChart(xdata,url,myChart2);
}
gh++;
}
if(title=='宽带'){
var tab=$('#xsdyj').ailk_tabs('getTab',title);
var panel=tab.panel('options');
var id="qryBrdChar";
if(kd==1){
var myChart3 = echarts.init(document.getElementById(id));
var url="${contextPath}/echars/echars_index!qryBrdChar.action";
setChart(xdata,url,myChart3);
}
kd++;
}

}



</script>

</head>

<body>

<div class='ailk-panel' id="map" title="规模总汇" style="height:400px;border:1px solid #ccc;padding:10px;"></div>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="ailk_portalbox_hottab">
<tr>
<td class="ailk_portalbox_hottab_interbg01" height="420px" width="100%">
<div class='ailk-panel' fit="true" title="落地情况评估表" id='panel' href="" rightTitle="Action.rightDetail1">
<div id="xsdyj" fit="true" border="false" class="ailk-tabs" onSelect="onSelect">
<div title="移动" style="padding: 0px;" id="yd">
<div id="qryMblChar" chartId="qryMblChar1" fit="true" style="border:0px;height:400px;width:1000" > </div>
</div>
<div title="宽带" style="padding: 0px;" id="kd">
<div id="qryBrdChar" chartId="qryBrdChar1" fit="true" style="border:0px;height:400px;width:1000" > </div>
</div>
<div title="固话" style="padding: 0px;" id="gh">
<div id="qryFixChar" chartId="qryFixChar1" fit="true" style="border:0px;height:400px;width:1000" > </div>
</div>

</div>
</div>
</td> </tr>
</table>






</div>
</body>

</html>

有不懂的可以联系我

1 0