前言

最近做网站的后台数据统计，其中有一项是从百度统计那里获取的访问网站的人员分布，然后我就使用echarts搞了一个中国地图，刚开始用假数据渲染出来后很简单，效果立竿见影，然而在使用后台获取数据后再渲染地图数据死活加载不出来，然后在昨天熬夜到一点后终于成功了，写前端的java是真的伤不起啊。。下面把教程给大家说一下避免在进坑！

效果

前端代码

html:

Echarts使用心得总结--中国地图

Js代码：var mapChart = echarts.init(document.getElementById("echarts-map-chart"));

var mapoption = {

title: {

text: '今日网站浏览量',

subtext: '中国区',

x: 'center'

},

tooltip: {

trigger: 'item'

},

dataRange: {

max:88,

min:0,

x: 'left',

y: 'bottom',

text: ['高', '低'], // 文本，默认为数值文本

color: ["#3887e0", "#e6e6e6"],

calculable: true

},

toolbox: {

show: true,

orient: 'vertical',

x: 'right',

y: 'center',

feature: {

mark: {show: true},

dataView: {show: true, readOnly: false},

restore: {show: true},

saveAsImage: {show: true}

}

},

roamController: {

show: true,

x: 'right',

mapTypeControl: {

'china': true

}

},

series: [

{

name: '浏览量',

type: 'map',

mapType: 'china',

roam: false,

itemStyle: {

normal: {

label: {show: true},

areaStyle: {color: '#000000'},//地图整体颜色

borderColor: '#fff',//地图各省轮廓颜色

borderWidth: 1,//地图各省轮廓线条粗细

},

emphasis: {color: '#'}

}

}

]

};

mapChart.setOption(mapoption);//先渲染出空地图

mapChart.hideLoading();

var url="http://localhost:8093";

//请求地图数据

$.ajax({

url: url+'/index/mapData',

type: 'POST',

dataType:'json',

success: function(data) {

var options=mapChart.getOption();

console.log(options);

// JSON.parse(data.result.areaData);这里至关重要！必须要把后台传的string转化为array才能渲染数据

options.series[0].data = JSON.parse(data.result.areaData);//把数据渲染进去

options.dataRange.max = data.result.max;

options.dataRange.min = data.result.min;

mapChart.hideLoading();

mapChart.setOption(options);//数据加载完再渲染一遍地图，这样数据就渲染上去了

$(window).resize(mapChart.resize);

}

});

});

总结：

这里其他的样式都是可以从文档上获取的，重点就是这里的数据必须为json数组，所以要把后台返回的String转化为json数组，下面给大家说下后台数据的获取以java为例。

后台

这里我们是获取的百度地图访问人员地域分布的数据，详细获取请点击：访问百度地图接口获取数据教程@PostMapping("/index/mapData")

@ResponseBody

public Res mapData() throws JSONException {

Map params= BaiduTjApi.siteAreaView("20191111","20191112");

List a= (List) params.get("city");

List b= (List) params.get("data");

JSONArray jsonMap = new JSONArray();//用的是org.json.JSONArray;

for (int i = 0; i < a.size(); i++) {

JSONObject dataObject=new JSONObject();//import org.json.JSONObject;

dataObject.put("name", a.get(i));

dataObject.put("value",b.get(i));

jsonMap.put(dataObject);

}

String result=jsonMap.toString();

System.out.println(result);

params=Maps.newHashMap();

params.put("areaData",result);

params.put("max",b.get(0));

params.put("min",b.get(b.size()-1));

return new Res(params);

}

解析的数据[{"name":"山东","value":948},{"name":"广东","value":193},{"name":"北京","value":118},{"name":"浙江","value":91},{"name":"湖南","value":65},{"name":"河北","value":55},{"name":"福建","value":55},{"name":"江苏","value":43},{"name":"上海","value":41},{"name":"河南","value":39},{"name":"四川","value":38},{"name":"江西","value":28},{"name":"湖北","value":26},{"name":"广西","value":13},{"name":"辽宁","value":13},{"name":"台湾","value":12},{"name":"安徽","value":11},{"name":"天津","value":9},{"name":"陕西","value":8},{"name":"云南","value":5},{"name":"香港","value":5},{"name":"重庆","value":5},{"name":"新疆","value":4},{"name":"黑龙江","value":3},{"name":"山西","value":3},{"name":"吉林","value":3},{"name":"贵州","value":3},{"name":"内蒙古","value":2},{"name":"甘肃","value":1},{"name":"澳门","value":1}]

你还没有登录，请先使用 QQ登录 或 注册！

文章评论

发表评论