ECharts 浙江地图实践

来源：互联网发布：极简生活知乎编辑：程序博客网时间：2024/04/27 17:57

效果:

首先:

在<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集合,这个就不解释了.

0 0