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

一时失言乱红尘 2021-11-11 05:12 503阅读 0赞

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

下面这个例子是我弄得汕尾市的，里面的链接是我项目的，我就不改了。这段代码其实是两个例子凑起来的，大家也可以再自己的项目里面试试。中间绿色部分是抄的官方的“标准geoJson格式扩展地图-全国主要城市”code。其他代码抄的是Echarts的start第4步的例子。大家改成自己的项目路径就ok了。

![Image 1][]

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
    </head>
    <body>
        
        <div id="main" style="height:400px"></div>
        
        <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>

转载于:https://www.cnblogs.com/coprince/p/5590135.html

[Image 1]: