series-map组件，在构建地理区域数据可视化时，一般是使用getJSON()来获取geojso数据，然后进行渲染。但是使用$.getJSON()就必须在http服务下进行访问，需要搭建http服务器。
代码如下：
//调用地图geojson $.getJSON('geojson/au-all.geo.json', function (data) { //some codes; }
然后通过：http://test.com/进行预览访问。
能不能在本地直接点击访问呢？答案是肯定的。其步骤如下：
- 1.获取对应区域的geojson；
- 2.将geojson文件转换位js文件；
(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['exports', 'echarts'], factory); } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { // CommonJS factory(exports, require('echarts')); } else { // Browser globals factory({}, root.echarts); } }(this, function (exports, echarts) { var log = function (msg) { if (typeof console !== 'undefined') { console && console.error && console.error(msg); } } if (!echarts) { log('ECharts is not Loaded'); return; } if (!echarts.registerMap) { log('ECharts Map is not loaded') return; } echarts.registerMap('lockdatav', //将geojson数据内容直接复制到该处即可； ); }));
将改JS文件保存为lockgeojson.js。
- 3.html文件中直接调用lockgeojson.js；
<!--对应的国家或地区JS文件--> <script type="text/javascript" src="js/lockgeojson.js"></script>
- 4.echarts代码开发
series: [{ type: 'map', map: 'lockdatav',//对应JS文件中地图的名称; roam: true, zoom: 1, aspectScale: 1, nameMap: {//自定义地区的名称映射 'South Australia': '南澳大利亚州', 'New South Wales': '新南威尔士州', 'Queensland': '昆士兰州', 'Tasmania': '塔斯马尼亚', 'Victoria': '维多利亚州', 'Western Australia': '西澳大利亚州', 'Australian Capital Territory': '澳大利亚首都领地', 'Northern Territory': '北领地', 'Norfolk Island': '诺福克岛', 'Jervis Bay Territory': '杰维斯湾地区', }, label: { normal: { show: false, color: "#fff" }, emphasis: { show: true, color: "#fff" } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { areaColor: '#2a333d' } }, }]
- 5.echarts自适应窗口；
//渲染图表，并自适应窗口； myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); });
Done!
