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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。