eChars实现哈尔滨市区县地图展示

eChars实现哈尔滨市区县地图展示

本次写的内容是关于eChars实现自定义地图的有关话题，虽然很多人都对eChars如何实现自定义地图进行过技术问答，但由于eChars官网对ECharts 之前提供下载的矢量地图数据来自第三方在线生成GeoJSon数据的关闭，使的我们生成GeoJSon数据变得困难，我尝试过使用工具自定义生成geoJSon

geoJSon地图数据包地址：http://download.csdn.net/download/u011688281/10144151

jsp代码

<%

//地图
List dtlist = EChartsService.getInstance().dtQxspxmpm(); //查询List数据
System.out.println("==="+dtlist.size());

%>
<div class="yxzg03 yxzg03_add">
<div id="main" style="width: 900px;height:700px;margin:0 auto"></div>  </div>
<script type="text/javascript">
$.get('../mapjson/haerbin.json', function (yCjson) {

echarts.registerMap('哈尔滨', yCjson);

var chart = echarts.init(document.getElementById('main'));

option = {
title: {
text: '',
x:'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
x:'left',
data:['数量']
},
dataRange:{
x: 'left',
y: 'bottom',
splitList: [
{start: 1000, label: '1000个以上', color: '#048CA3'},
{start: 800, end: 1000, label: '800个 到 1000个', color: '#069CB5'},
{start: 600, end: 799, label: '600个 到 799个', color: '#05AAC6'},
{start: 400, end: 599, label: '400个 到 599个', color: '#14BCD9'},
{start: 300, end: 399, label: '300个 到 399个', color: '#15CCEB'},
{end: 300, label: '300个以下', color: '#16D8FA'}
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
series:[
{
name:'投资金额',
type:'map',
map:'哈尔滨',
roam: false,
itemStyle:{
normal:{
label:{
show:true,
textStyle: {
color: "rgb(249, 249, 249)"
}
}
},
emphasis:{label:{show:true}}
},

data:[
<%--   <%

if(dtlist!=null&&dtlist.size()>0){

for(int j=0;j<dtlist.size();j++){

Coordinate coo1=(Coordinate)dtlist.get(j);
String name=coo1.getX();
double money=Double.valueOf(coo1.getY()).doubleValue();
%>

{name:'<%=name%>',value:<%=money%>},

<%
}
}
%>  --%> //注掉的部分为后台获取数据，为方便展示效果，采用随机数数据的方式
{name: '南岗区',value: Math.round(Math.random()*2000)},
{name: '松北区',value: Math.round(Math.random()*2000)},
{name: '呼兰区',value: Math.round(Math.random()*2000)},
{name: '巴彦县',value: Math.round(Math.random()*2000)},
{name: '木兰县',value: Math.round(Math.random()*2000)},
{name: '通河县',value: Math.round(Math.random()*2000)},
{name: '道外区',value: Math.round(Math.random()*2000)},
{name: '双城区',value: Math.round(Math.random()*2000)},
{name: '阿城区',value: Math.round(Math.random()*2000)},
{name: '香坊区',value: Math.round(Math.random()*2000)},
{name: '平房区',value: Math.round(Math.random()*2000)},
{name: '道里区',value: Math.round(Math.random()*2000)},
{name: '阿城区',value: Math.round(Math.random()*2000)},
{name: '五常市',value: Math.round(Math.random()*2000)},
{name: '尚志市',value: Math.round(Math.random()*2000)},
{name: '延寿县',value: Math.round(Math.random()*2000)},
{name: '宾县',value: Math.round(Math.random()*2000)},
{name: '方正县',value: Math.round(Math.random()*2000)},
{name: '依兰县',value: Math.round(Math.random()*2000)}
]
}
],
};
chart.setOption(option);
});
</script>

java

代码

public List<XXX> dtQxspxmpm(){
sqlSession = sqlSessionFactory.openSession(false);
EChartsMapper eChartsMapper = sqlSession.getMapper(EChartsMapper.class);
List<XXX> list=new ArrayList<XXX>();

String sql = " ";
list=  eChartsMapper.txfxTzxmJeHyfb(sql);
return list;
}

实现效果：