效果:
首先:
在<body>中:
<div id="main" style="height:400px"></div>
js:
<script src="${resources }/echarts/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths : {
echarts : '${resources }/echarts/dist' //<span style="font-family: Arial, Helvetica, sans-serif;">${resources } 看下面的</span>
}
});
require([ 'echarts','echarts/chart/map' ], function(ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
option = {
title : {
x : 'center'
},
tooltip : {
trigger : 'item'
},
legend : {
orient : 'vertical',
x : 'left',
data : [ '总问题数', '解答率(%)' ]
},
dataRange : {
min : 0,
max : 100,
x : 'left',
y : 'bottom',
color : [ 'skyblue', 'yellow' ],
text : [ '高', '低' ], // 文本,默认为数值文本
calculable : true
},
series : [ {
name : ' ',
type : 'map',
mapType : '浙江',
itemStyle : {
normal : {
label : {
show : true
}
},
emphasis : {
label : {
show : true
}
}
},
data : []
}, {
name : '总问题数',
type : 'map',
mapType : '浙江',
itemStyle : {
normal : {
label : {
show : true
}
},
emphasis : {
label : {
show : true
}
}
},
data : [],
markPoint : {
itemStyle : {
normal : {
color : 'red'
}
},
data : ${list1} //下面解释
},
geoCoord : {
'湖州市' : [ 119.60, 30.60 ],
'嘉兴市' : [ 121.0, 30.5 ],
'绍兴市' : [ 120.58, 30 ],
'衢州市' : [ 118.88, 28.97 ],
'金华市' : [ 119.64, 29.12 ],
'台州市' : [ 121.25, 28.69 ],
'舟山市' : [ 122.20, 30.5 ],
'宁波市' : [ 121.5, 29.8 ],
'丽水市' : [ 119.6, 28 ],
'温州市' : [ 120.7, 28 ],
'杭州市' : [ 119.7, 30 ]
}
}, {
name : '解答率(%)',
type : 'map',
mapType : '浙江',
itemStyle : {
normal : {
label : {
show : true
}
},
emphasis : {
label : {
show : true
}
}
},
data : ${list2} //下面解释
} ]
};
// 为echarts对象加载数据
myChart.setOption(option);
});
</script>
${resources } :改成相对路径也好,这里是
list1和list2:满足格式[{name:温州市 value:21} ,{name:杭州市 value:55} ]的json,有:
List<Map<String, Object>> list1 = new ArrayList<Map<String, Object>>();
List<Map<String, Object>> list2 = new ArrayList<Map<String, Object>>();
for (StatisticsArea s : arealist) {
Map<String, Object> m1 = new java.util.HashMap<>();
Map<String, Object> m2 = new java.util.HashMap<>();
m1.put("name", s.getCityName());
m2.put("name", s.getCityName());
m1.put("value", s.getSumQuestion());
m2.put("value", s.getAnswered());
list1.add(m1);
list2.add(m2);
}
request.setAttribute("list1", JSON.toJSONString(list1));
request.setAttribute("list2", JSON.toJSONString(list2));
arealist 是调用某方法获取的List集合,这个就不解释了.