本人菜鸟一枚,最近搞echarts地图。看到官方给的“”的例子,瞬间就蒙逼了。(http://echarts.baidu.com/echarts2/doc/example/map20.html ,2016年8月29日 找到的)不怪人官网的例子不好,实在是我看不懂它是怎么弄得。最后折腾了一晚上,最后终于弄出个想样子的例子来。(有同感的收藏下,高手勿喷!)
下面这个例子是我弄得汕尾市的,里面的链接是我项目的,我就不改了。这段代码其实是两个例子凑起来的,大家也可以再自己的项目里面试试。中间绿色部分是抄的官方的“标准geoJson格式扩展地图-全国主要城市”code。其他代码抄的是Echarts的start第4步的例子。大家改成自己的项目路径就ok了。
<!DOCTYPE html>
<head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px"></div> <!-- ECharts单文件引入 --> <script src="> <script src="{weiqiye::STATICS}/wx/echarts/build/dist/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: '{weiqiye::STATICS}/wx/echarts/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/map' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var cityMap = { "汕尾市": "441500" }; var curIndx = 0; var mapType = []; var mapGeoData = require('echarts/util/mapData/params'); console.log(mapGeoData) for (var city in cityMap) { mapType.push(city); // 自定义扩展图表类型 mapGeoData.params[city] = { getGeoJson: (function (c) { var geoJsonName = cityMap[c]; return function (callback) { $.getJSON('{weiqiye::STATICS}/wx/echarts/geoJson/china-main-city/' + geoJsonName + '.json', callback); } })(city) } }var ecConfig = require('echarts/config'); var zrEvent = require('zrender/tool/event'); option = { title: { text : '', }, tooltip : { trigger: 'item', formatter: '{b}所有景点' }, series : [ { name: '', type: 'map', mapType: '汕尾市', selectedMode : 'single', itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[] } ] };
// 为echarts对象加载数据 myChart.setOption(option); } ); </script> </body>