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.controller8.效果图如下@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; }