操作演示
操作说明
1.确定目录town/chongqing.json与选择框的名称相同;
2.使用到$.getJSON,必须通过http访问而不能单机使用;
3.表单内输入区县级,不支持地级市或其他名称;
4.数据时间为2015年左右,要求精确的请联系客服定制;
5.生成json数据后,到http://geojson.io/验证;
6.默认格式可以直接导入eCharts;
配置说明
- separate.zip,geojson核心分离程序,放入http目录,进行访问;
- 省市geojson的地理信息文件,命名规则,该省市的全拼,如chongqing.json;将该chongqing.json放入town目录;
- 修改index.html文件第28行value为对应的省份拼音和文本即可。
<option value='chongqing'>重庆市</option>`
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!