ECharts 浙江地图实践

效果:

首先:

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

ECharts 浙江地图实践相关推荐

Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
vue+echarts中国地图+省市级地图（全程教学，你也可以）
echarts+vue中国地图,点击进入省级地图 VUE+Echarts+省市地图钻取(简洁版,超详细) 以上两篇来自站内,是本文的主要参考来源. 首先上才艺首先需要引入 echarts 包 npm ...
vue+ echarts实现地图（中国地图）
** vue+ echarts实现地图(中国地图) ** <div class="myChartMap" id="myChartMap" >< ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...
vue全家桶+Echarts+百度地图，搭建数据可视化系统
本文章篇幅略长,内容有点多大佬可根据目录选择性查阅新人可一步步来阅读 1 前言 1.1 业务场景突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未 ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...

ECharts 浙江地图实践

ECharts 浙江地图实践相关推荐

最新文章

热门文章