操作演示
操作说明
1.确定目录town/chongqing.json与选择框的名称相同;
2.使用到$.getJSON,必须通过http访问而不能单机使用;
3.表单内输入区县级,不支持地级市或其他名称;
4.数据时间为2015年左右,要求精确的请联系客服定制;
5.生成json数据后,到http://geojson.io/验证;
6.默认格式可以直接导入eCharts;
echarts加载说明
构建容器
<div id="map" style="height: 100%"></div>
地图渲染
//调用地图geojson
$.getJSON('geojson/chongqing.json', function (data) {
//注册地图;
echarts.registerMap('lockdatav', data);
var myChart = echarts.init(document.getElementById('map'));
var option = {
backgroundColor: '#404a59',
title: {
text: '乡镇GEOJSON - 漏刻有时地图数据可视化',
top: "5%",
x: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + params.value[2];
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['pm2.5'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'lockdatav',//必须与初始注册的地图名称一致;
roam: true,
aspectScale: 1,
label: {
normal: {
show: true,
color: "#fff"
},
emphasis: {
show: true,
color: "#fff"
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: []//根据需要执行气泡图、飞线图;
};
//渲染图表,并自适应窗口;
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
});
lockdatav Done!