Echarts-地图扩展-标准geoJson格式扩展地图-例子

时间 2019-11-20

标签 echarts 地图扩展标准 geojson 格式例子繁體版

原文原文链接

本人菜鸟一枚，最近搞echarts地图。看到官方给的“标准geoJson格式扩展地图-全国主要城市”的例子，瞬间就蒙逼了。不怪人官网的例子很差，实在是我看不懂它是怎么弄得。最后折腾了一夜，最后终于弄出个想样子的例子来。（有同感的收藏下，高手勿喷！）javascript

下面这个例子是我弄得汕尾市的，里面的连接是我项目的，我就不改了。这段代码实际上是两个例子凑起来的，你们也能够再本身的项目里面试试。中间绿色部分是抄的官方的“标准geoJson格式扩展地图-全国主要城市”code。其余代码抄的是Echarts的start第4步的例子。你们改为本身的项目路径就ok了。html

 

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具有大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <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>