echarts 地圖及常見效果

矢量地圖的實現(xiàn)步驟

  • echarts最基本的代碼結(jié)構(gòu)：
    引入js文件，DOM容器，初始化對象，設(shè)置option

  • 準備中國的矢量地圖json文件，放到j(luò)son/map/的目錄下
    china.json
    json文件下載地址：DataV.GeoAtlas地理小工具系列 (aliyun.com)

  • 使用Ajax獲取china.json

$.get('./json/map/china.json',(chinaJson)=>{ })
  • 在回調(diào)函數(shù)中往echarts全局對象注冊地圖的json數(shù)據(jù)
 echarts.registerMap('chinaMap',chinaJson)
  • 在geo下設(shè)置
type:'map',
map:'chinaMap'
image.png

常用配置

  • 縮放拖動 roam

roam:true

  • 名稱顯示 label

label: {
  show: true
}
image.png

  • 初始縮放比例 zoom

zoom: 1.2

  • 地圖中心點 center

image.png

示例代碼：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>echarts地圖</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="lib/echarts.js"></script>
</head>
<body>
    <!-- 步驟2：準備一個呈現(xiàn)圖標的盒子 -->
    <div style="width: 1000px; height: 600px; border:1px solid red;"></div>
    <script>
        let mCharts = echarts.init(document.querySelector('div'));

        $.get('./json/map/china.json',(chinaJson)=>{
            console.log(chinaJson);
            echarts.registerMap('chinaMap',chinaJson)
            let option = {
                geo: {
                    type: 'map',
                    map: 'chinaMap', //chinaMap需要和registerMap中的第一個參數(shù)保持一致
                    roam: true, // 設(shè)置允許縮放以及拖動的效果
                    label: {
                        show: true  //展示標簽
                    },
                    zoom: 1.2, //設(shè)置初始化的縮放比例
                    center: [87.617733,43.792818] //設(shè)置地圖中心點的坐標 （圖為將新疆設(shè)置為地圖中心點）
                }
            }
            mCharts.setOption(option)
        })

    </script>
</body>
</html>

常見效果

  • 顯示某個區(qū)域：

  1. 加載該區(qū)域的矢量地圖數(shù)據(jù)
  2. 通過registerMap注冊到echarts全局對象中
  3. 指明geo配置下的type和map屬性
  4. 通過zoom放大該區(qū)域

  5. 通過center定位中心點


    image.png
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>echarts地圖常見效果</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="lib/echarts.js"></script>
</head>
<body>
    <!-- 步驟2：準備一個呈現(xiàn)圖標的盒子 -->
    <div style="width: 1000px; height: 600px; border:1px solid red;"></div>
    <script>
        let mCharts = echarts.init(document.querySelector('div'));

        $.get('./json/map/shanxi.json',(chinaJson)=>{
            console.log(chinaJson);
            echarts.registerMap('chinaMap',chinaJson)
            let option = {
                geo: {
                    type: 'map',
                    map: 'chinaMap', //chinaMap需要和registerMap中的第一個參數(shù)保持一致
                    roam: true, // 設(shè)置允許縮放以及拖動的效果
                    label: {
                        show: true  //展示標簽
                    },
                    zoom: 1.2, //設(shè)置初始化的縮放比例
                    //center: [87.617733,43.792818] //設(shè)置地圖中心點的坐標 （圖為將新疆設(shè)置為地圖中心點）
                }
            }
            mCharts.setOption(option)
        })

    </script>
</body>
</html>

  • 不同城市顏色不同

1.顯示基本的中國地圖
2.城市的空氣質(zhì)量數(shù)據(jù)設(shè)置給series
3.將series下的數(shù)據(jù)和geo關(guān)聯(lián)起來
4.結(jié)合visualMap配合使用


image.png

示例代碼如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>echarts地圖</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="lib/echarts.js"></script>
</head>
<body>
    <!-- 步驟2：準備一個呈現(xiàn)圖標的盒子 -->
    <div style="width: 1000px; height: 600px; border:1px solid red;"></div>
    <script>
        let mCharts = echarts.init(document.querySelector('div'));
        let airData = [
            {name:'北京市',value:39.93},
            {name:'天津市',value:39.13},
            {name:'河北省',value:147},
            {name:'山西省',value:39},
            {name:'內(nèi)蒙古自治區(qū)',value:58},
            {name:'遼寧省',value:50},
            {name:'吉林省',value:51},
            {name:'黑龍江省',value:114},
            {name:'上海市',value:31.23},
            {name:'江蘇省',value:67},
            {name:'浙江省',value:84},
            {name:'安徽省',value:117},
            {name:'福建省',value:29},
            {name:'江西省',value:96},
            {name:'山東省',value:92},
            {name:'河南省',value:113},
            {name:'湖北省',value:273},
            {name:'湖南省',value:175},
            {name:'廣東省',value:38},
            {name:'廣西壯族自治區(qū)',value:59},
            {name:'海南省',value:54},
            {name:'重慶市',value:66},
            {name:'四川省',value:58},
            {name:'貴州省',value:71},
            {name:'云南省',value:25},
            {name:'西藏自治區(qū)',value:24},
            {name:'陜西省',value:61},
            {name:'甘肅省',value:99},
            {name:'青海省',value:57},
            {name:'寧夏回族自治區(qū)',value:52},
            {name:'新疆維吾爾自治區(qū)',value:84},
            {name:'臺灣省',value:88},
            {name:'香港特別行政區(qū)',value:66},
            {name:'澳門特別行政區(qū)',value:77},
        ]
        $.get('./json/map/china.json',(chinaJson)=>{
            console.log(chinaJson);
            echarts.registerMap('chinaMap',chinaJson)
            let option = {
                geo: {
                    type: 'map',
                    map: 'chinaMap', //chinaMap需要和registerMap中的第一個參數(shù)保持一致
                    roam: true, // 設(shè)置允許縮放以及拖動的效果
                    label: {
                        show: true  //展示標簽
                    },
                    zoom: 1.2, //設(shè)置初始化的縮放比例
                },
                series: [
                    {
                        data: airData,
                        geoIndex: 0,  //將空氣質(zhì)量的數(shù)據(jù)和第0個geo配置關(guān)聯(lián)在一起
                        type:'map',
                    }
                ],
                visualMap:{
                    min:0,
                    max:300,
                    inRange:{
                        color:['white', 'red'], //控制顏色漸變的范圍
                    },
                    calculable: true //出現(xiàn)滑塊
                }
            }
            mCharts.setOption(option)
        })

    </script>
</body>
</html>

  • 地圖和散點圖結(jié)合

1.給series下增加新的對象
2.準備好散點數(shù)據(jù)，設(shè)置給新對象的data （坐標信息）
3.配置新對象的type
type: effectScatter
4.讓散點圖使用地圖坐標系統(tǒng)
coordinateSystem:'geo'
5.讓漣漪的效果增加明顯
rippleEffect:{
scale: 10
}


image.png
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>echarts地圖</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="lib/echarts.js"></script>
</head>
<body>
    <!-- 步驟2：準備一個呈現(xiàn)圖標的盒子 -->
    <div style="width: 1000px; height: 600px; border:1px solid red;"></div>
    <script>
        let mCharts = echarts.init(document.querySelector('div'));
        let scatterData = [
            {
                value: [112.549248, 37.857014]
            },
            {
                value:[117.283042, 31.86119]
            }
        ]
        let airData = [
            {name:'北京市',value:39.93},
            {name:'天津市',value:39.13},
            {name:'河北省',value:147},
            {name:'山西省',value:39},
            {name:'內(nèi)蒙古自治區(qū)',value:58},
            {name:'遼寧省',value:50},
            {name:'吉林省',value:51},
            {name:'黑龍江省',value:114},
            {name:'上海市',value:31.23},
            {name:'江蘇省',value:67},
            {name:'浙江省',value:84},
            {name:'安徽省',value:117},
            {name:'福建省',value:29},
            {name:'江西省',value:96},
            {name:'山東省',value:92},
            {name:'河南省',value:113},
            {name:'湖北省',value:273},
            {name:'湖南省',value:175},
            {name:'廣東省',value:38},
            {name:'廣西壯族自治區(qū)',value:59},
            {name:'海南省',value:54},
            {name:'重慶市',value:66},
            {name:'四川省',value:58},
            {name:'貴州省',value:71},
            {name:'云南省',value:25},
            {name:'西藏自治區(qū)',value:24},
            {name:'陜西省',value:61},
            {name:'甘肅省',value:99},
            {name:'青海省',value:57},
            {name:'寧夏回族自治區(qū)',value:52},
            {name:'新疆維吾爾自治區(qū)',value:84},
            {name:'臺灣省',value:88},
            {name:'香港特別行政區(qū)',value:66},
            {name:'澳門特別行政區(qū)',value:77},
        ]
        $.get('./json/map/china.json',(chinaJson)=>{
            console.log(chinaJson);
            echarts.registerMap('chinaMap',chinaJson)
            let option = {
                geo: {
                    type: 'map',
                    map: 'chinaMap', //chinaMap需要和registerMap中的第一個參數(shù)保持一致
                    roam: true, // 設(shè)置允許縮放以及拖動的效果
                    label: {
                        show: true  //展示標簽
                    },
                    zoom: 1.2, //設(shè)置初始化的縮放比例
                },
                series: [
                    {
                        data: airData,
                        geoIndex: 0,  //將空氣質(zhì)量的數(shù)據(jù)和第0個geo配置關(guān)聯(lián)在一起
                        type:'map',
                    },
                    {
                        type: 'effectScatter',
                        data: scatterData, //配置散點的坐標數(shù)據(jù)
                        coordinateSystem:'geo', //指明散點使用的坐標系統(tǒng)  geo的坐標系統(tǒng)
                        rippleEffect:{
                            scale: 10
                        }
                    }
                ],
                visualMap:{
                    min:0,
                    max:300,
                    inRange:{
                        color:['white', 'red'], //控制顏色漸變的范圍
                    },
                    calculable: true //出現(xiàn)滑塊
                }
            }
            mCharts.setOption(option)
        })

    </script>
</body>
</html>

地圖特點

  • 地圖主要可以幫助我們從宏觀的角度快速看出不同地理位置上數(shù)據(jù)的差異
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容