1.導入echarts.js文件
2.博主這裏使用的是地圖狀的圖標,所有還需要加上
<script src="http://echarts.baidu.com/asset/map/js/china.js"></script>
3.導入JQuery文件,使用ajax來加載動態數據
4.html代碼
<div id="main" style="width:1000px;height:600px;"></div>5.js代碼$(function(){ <!--異步加載數據-->
$.ajax({
type:"GET",
url:"http://localhost:8080/global_rader/query/queryCities.action",
dataType:"JSON",
success : function(msg) {
var result = [];
var data = msg.data;
if(data){ <!--這個循環是爲了把得到的JSON數組中的一些屬性拼接後變成另一個js數組-->
for(var i = 0;i<data.length;i++){
var city = data[i];
var longitude = city.longitude;
var latitude = city.latitude;
var v = city.value;
var value = [longitude,latitude,v];
result.push({
name:city.name,
value:value
});
}
}
var myChart = echarts.init(document.getElementById('main'));
option = {
backgroundColor: '#404a59',
title: {
text: '全國主要城市空氣質量',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
y: 'bottom',
x:'right',
data:['pm2.5'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},<!--這裏的series有兩個對象，每個對象使用同一組數據，但其顯示效果不同,具體的效果配置請參考官方文檔-->
series : [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: result,<!--這裏就使用了在上面拼接好的JS數組,裏面的內容是name:'xx',value:[經度,緯度,pm值]-->
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: result.sort(function (a, b) {
return b.value[2] - a.value[2];
}).slice(0, 6),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}
]
};
myChart.setOption(option);
}
});
});6.JavaBean
public class City {
private Long id;
private String name;
private int value;
private float longitude;
private float latitude;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
public float getLongitude() {
return longitude;
}
public void setLongitude(float longitude) {
this.longitude = longitude;
}
public float getLatitude() {
return latitude;
}
public void setLatitude(float latitude) {
this.latitude = latitude;
}
}
7.controller
@RequestMapping("queryCities")
@ResponseBody
public Object queryDatas()throws Exception{
Map<String,Object> map =new HashMap<String,Object>();
List<City> cities = logService.getAll();//這個方法返回所有的City數據
map.put("data",cities);
return map;
}