我这里现在有一个纯用前端js写的中国地图页面,我不知道这个该如何与后台交互,跪求各路大神求教
问题描述:
<script>
var myChart = echarts.init(document.getElementById('main') );
var options = {
backgroundColor: '#323c48',
title: {
text: '开户统计',
subtext: 'china',
left: 'center',
textStyle:{
color: '#fff',
fontSize:16,
fontWeight:'normal',
fontFamily:"Microsoft YaHei"
},
subtextStyle:{
color: '#ccc',
fontSize:13,
fontWeight:'normal',
fontFamily:"Microsoft YaHei"
}
},
//提示框的触发方式
tooltip: {
trigger: 'item',
formatter: function(params) {
var res = params.name+'<br/>';
var myseries = options.series[0].data;
if(Tools.isDataValid(myseries)){
for(var i = 0; i < myseries.length; i++){
if(myseries[i].name==params.name){
res+="已开通总数:"+myseries[i].value+"<br/>登记录入总数:"+myseries[i].zlr+"<br/>当日已开通:"+myseries[i].drkt+"</br>当日登记录入:"+myseries[i].drlr
}
}
return res;
}
}
},
toolbox:{
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
iconStyle:{
normal:{
color:'#fff'
}
},
feature:{
restore:{
title:"还原"
},
saveAsImage:{
title:"保存为图片"
},
dataView:{
title:"数据视图",
readOnly: true,
optionToContent: function(opt) {
var series = opt.series[0].data;
var table = '<table class="datatableview" style="width:100%;text-align:center"><tbody><tr>'
+ '<th rowspan="2">省份</th>'
+ '<th colspan="2">统计日期当前</th>'
+ '<th colspan="2">截止到统计日期</th>'
+ '</tr>'
+ '<tr>'
+ '<th>已开通</th>'
+ '<th>登记录入</th>'
+ '<th>已开通</th>'
+ '<th>登记录入</th>'
+ '</tr>'
for (var i = 0, l = series.length; i < l; i++) {
if(Tools.isDataValid(series[i].value)){
table += '<tr>'
+ '<td>' + series[i].name + '</td>'
+ '<td>' + series[i].drkt + '</td>'
+ '<td>' + series[i].drlr + '</td>'
+ '<td>' + series[i].value + '</td>'
+ '<td>' + series[i].zlr + '</td>'
+ '</tr>';
}
}
table += '</tbody></table>';
return table;
}
}
}
},
//分段视觉映射组件
visualMap: {
type:'piecewise',
show: true,
left:'left',
top:'1%',
textStyle:{
color:'#fff'
},
seriesIndex: 0,
pieces: []
},
//系列列表
series: [
],
animationDuration:1000,
animationEasing:'cubicOut',
animationDurationUpdate:1000
};
</script>
这其中还加载了几个js和好多json文件,实在是不知道怎样和后台交互
答
你是指地图数据从后台获取吗?还是省市区下钻呢?不管什么数据,你后台组织好数据ajax 请求获取json就可以了啊,然后echarts里面的series就可以用获取的json进行数据展示
答
后台处理数据,调用js方法,将数据一般是json格式的参数传进去,echarts会把得到的数据展示在图中。