您的位置：首页 > Web前端 > JavaScript

echarts之基于geojson的自定义地图

2017-05-09 21:21 429 查看

应用场景：需要在平面图或者特殊地理区域上展示数据，比如

geojson作为echarts的地图数据源，能实现简单平面图（如果是立体图就需要研究svg）上的数据交互。优点：技术低，学习起来没难度；缺点：耗时耗力，复杂的平面图有难度。

实现步骤： 1、在 http://geojson.io/ 上画自己需要的平面图并导出为geojson

勾画区域时添加name属性

定义一个js文件
，变量内容为上面制作的topojson文件

完整简单demo代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>巡检异常读数地图</title>
</head>
<body>

<div id="main" style="height:714px"></div>
<script type="text/JavaScript" src="echarts.min.js"></script>
<script type="text/javascript" src="test2map.js"></script>
<script type="text/javascript">
var testData = [
{
name:'区域1',value:'480'
},
{
name:'区域2',value:'900'
},
{
name:'区域3',value:'1939'
}
];
//获取最大最小值以便做数据筛选器
var maxData = 0;
var minData = 0;
for(var i = 0;i<testData.length;i++){
var value = parseInt(testData[i].value);
if(value > maxData){
maxData = value;
}
if(value<minData){
minData = value;
}
}

var option = {

tooltip : {
trigger : 'item',
formatter : '{b}<br/>{c} (人次)'
},
toolbox : {
show : true,
orient : 'vertical',
x : 'right',
y : 'center',
feature : {
mark : {
show : true
},
saveAsImage : {
show : true
}
}
},
dataRange : {
min : minData*0.8,
max : maxData*1.2,
text : [ '生意好', '生意不好' ],
realtime : false,
calculable : true,
x: 'right',
y: 'top',
orient: 'horizontal'
},
series : [ {
name : '日客户流量',
type : 'map',
mapType : 'mymap', // 自定义扩展图表类型
itemStyle : {
normal : {
label : {
show : true
}
},
emphasis : {
label : {
show : true
}
}
},
data : testData,
// 文本位置修正
textFixed : {
'Yau Tsim Mong' : [ -10, 0 ]
},
// 文本直接经纬度定位
geoCoord : {
'Islands' : [ 113.95, 22.26 ]
}
} ]
};
//series里定义的mymap,地图js文件里定义的testJson
echarts.registerMap('mymap', testJson);

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

chart.setOption(option);
</script>
</body>
</html>效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： echart echarts

相关文章推荐

新的分享

章节导航