使用echarts3實現散點地圖

時間  2019-12-05
標籤 使用 echarts3 echarts 實現 地圖 简体版
原文   原文鏈接

在開發過程當中，咱們總會接到關於數據處理分析的需求，其中有一部分很重要就是數據統計可視化展現，對於數據可視化方面，echarts這點就作的很是好。最近研究echarts，對於散點地圖這一塊挺感興趣的，在這裏就作一篇整個過程的分享，首先給你們看下效果圖：javascript

clipboard.png

顏色方面大體比較淡，大家能夠根據本身需求調整css

1、準備html

一、新建html，這邊我創建的是echarts-map.html，而後引入echarts文件，能夠去官網下載（下載完整版的），而後解壓我這邊結合的是layui和jquery來的，因此總的引入以下：java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>echarts-map</title>
    <link rel="stylesheet" href="plugin/layui/css/layui.css"/>
    <script src="plugin/layui/layui.js"></script>
    <script src="plugin/jquery/jquery.min.js"></script>
    <!-- 我把echarts.js更名字了，以便區分其餘版本 -->
    <script src="plugin/echarts/echarts3.8.4.js"></script>
</head>
<body>
</body>

二、建立畫布容器jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 這裏是上面的引用文件 -->
</head>
<body>
    <div class="model">
        <div class="panel-body">
            <div id="map" style="width:80%;height: 500px;float: left">
                <!-- 這邊是將要存放的地圖畫布 -->
            </div>
        </div>
    </div>
</body>

2、繪製地圖
一、echarts的中國地圖想要詳細繪製出各省市，須要另外引入js和json文件，先下載map的js和json，密碼是uqbj。json

在開始的引用文件地方將china.js文件引入：echarts

<script src="plugin/echarts/map/china.js"></script>

二、從這裏開始使用js來繪製地圖，全部代碼寫在<script>標籤裏面，
（1）首先是先初始化 ECharts 示例，在 init() 中傳入圖表容器 Dom 對象，
（2）同時定義一個變量 option，做爲圖表的配置項，
（3）經過配置 option，新建一個地理座標系 geo ，地圖類型爲中國地圖，
（4）而後調用 setOption(option) 爲圖表設置配置項。異步

注意：中國地圖的map值爲 ‘china’ ，世界地圖的map值爲 ‘world’ ，但若是要引用省市自治區地圖 map 值爲簡體中文，例如 beijing.js，map 值爲’北京’。函數

這裏結合layui和jquery：大數據

<script type="text/javascript">
        var layer;
        
        function map() {
            // 一、初始化echarts示例map
            var map = echarts.init(document.getElementById('map'));
            
            // 二、map的配置，配置 option，新建一個地理座標系 geo ，地圖類型爲中國地圖
            var option = {
                geo: {
                      map: 'china'
                  }
            };
            
            //三、調用 setOption(option) 爲圖表設置配置項
            map.setOption(option);
        }
        
        layui.use(['element', 'layer'], function() {
            var element = layui.element();
            layer = layui.layer;
            $(document).ready(function () {
                map();
            });
        });
</script>

而後引用json格式的地圖數據，經過異步加載的方式，加載完成後須要手動註冊地圖
這裏咱們使用 jQuery 的 $.get() 方法異步加載 china.json ，在回調函數中，以上述一樣的方法初始化一個 mapCharts 、註冊地圖並設置 option，因此修改上面的代碼爲：

<script type="text/javascript">
        var layer;
        
        function map() {
            // 一、初始化echarts示例map
            var map = echarts.init(document.getElementById('map'));
            
            $.get('plugin/echarts/map/json/china.json',function(chinaJson){
                echarts.registerMap('china', chinaJson); // 註冊地圖
            
                // 二、map的配置，配置 option，新建一個地理座標系 geo ，地圖類型爲中國地圖
                var option = {
                    geo: {
                          map: 'china'
                      }
                };
                
                //三、調用 setOption(option) 爲圖表設置配置項
                map.setOption(option);
            })
        }
        
        layui.use(['element', 'layer'], function() {
            var element = layui.element();
            layer = layui.layer;
            $(document).ready(function () {
                map();
            });
        });
</script>

而後就能夠看到這樣的地圖了：

clipboard.png

四、給地圖改顏色，地圖的繪製都在option裏面操做，有各類配置項，能夠查找官方文檔

var option = {
    geo: {
          map: 'china',
          label: {
            emphasis: {
                show: false
            }
        },
        roam: false,
        // 定義樣式
        itemStyle: {
            // 普通狀態下的樣式
            normal: {
                areaColor: '#ABCDEF99',
                borderColor: '#fff'
            },
            // 高亮狀態下的樣式,默認黃色
            emphasis: {
                //areaColor: '#2a333d'
            }
        }
      }
};

改顏色後的地圖如圖：

clipboard.png

3、繪製散點圖
一、新建散點圖series

這裏用到的數據須要兩個，一個是各城市的座標數據，一個是每一個城市對應所須要的值，這裏到echarts3的官網例子裏面就有，這裏不詳細贅述，只引幾個

因此這裏要進行的步驟是：
（1）在 option 中添加一個 series ， series 的類型爲散點圖 scatter ，座標系爲地理座標系 geo 。
（2）引入城市對應的要顯示的data值
（3）引入城市的座標值
（4）使用函數讓data值和座標值按城市名對應起來
具體看如下代碼註釋

<script type="text/javascript">
        var layer;
        
        function map() {
            var map = echarts.init(document.getElementById('map'));
            
            //（2）引入data數據
            var data = [
                {name: '海門', value: 9},
                {name: '鄂爾多斯', value: 12},
                {name: '招遠', value: 12},
                {name: '舟山', value: 12},
                {name: '齊齊哈爾', value: 14},
                {name: '鹽城', value: 15},
                {name: '赤峯', value: 16},
                {name: '青島', value: 18},
                {name: '乳山', value: 18},
                ...
            }
            
            $.get('plugin/echarts/map/json/china.json',function(chinaJson){
                echarts.registerMap('china', chinaJson); // 註冊地圖
                
                //（3）引入城市座標
                var geoCoordMap = {
                    '海門':[121.15,31.89],
                    '鄂爾多斯':[109.781327,39.608266],
                    '招遠':[120.38,37.35],
                    '舟山':[122.207216,29.985295],
                    '齊齊哈爾':[123.97,47.33],
                    '鹽城':[120.13,33.38],
                    '赤峯':[118.87,42.28],
                    '青島':[120.33,36.07],
                    '乳山':[121.52,36.89],
                    ...
                }
                
                //（4）將數據和城市座標對應上
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                };
            
                var option = {
                    geo: {
                          ...
                      }
                      //（1）series 的類型爲散點圖 scatter
                    series: [
                        {
                            name: 'pm2.5',            // series名稱
                            type: 'scatter',          // series圖表類型
                            coordinateSystem: 'geo',  // series座標系類型
                            data: convertData(data),  // series數據內容
                            //控制顯示文本
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            //series樣式
                            itemStyle: {
                                normal: {
                                    color: '#ddb926'
                                }
                            }
                        }
                    ]
                };
                map.setOption(option);
            })
        }
        
        layui.use(['element', 'layer'], function() {
            var element = layui.element();
            layer = layui.layer;
            $(document).ready(function () {
                map();
            });
        });
</script>

這樣就能夠將散點渲染出來了

clipboard.png

到此基本就完成了，接下來就是樣式變更了。

4、修改樣式

一、根據數值大小改變點的大小，這個在series配置裏面加上symbolSize便可：

series: [
{
    ...
    symbolSize: function (val) {//根據數值大小控制點的大小
        return val[2] / 10;
    },
    ...
},

效果這樣

clipboard.png

二、改變點的顏色和新增圖示等,在option加上下面部分

var option = {
    title: {
        text: '全國主要城市空氣質量',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    //提示框組件
    tooltip : {
        trigger: 'item'
    },
    //圖例組件
    legend: {
        /*orient: 'vertical',
        y: 'bottom',
        x:'right',
        data:['pm2.5'],
        textStyle: {
            color: '#000'
        }*/
    },
    visualMap: {
        min: 0,
        max: 300,
        calculable: true,
        inRange: {
            color: ['#ABCDEF', '#99CC99']
        },
        textStyle: {
            color: '#fff'
        }
    },
    geo:{
        ...
    }
    series:[
        ...
    ]
}

clipboard.png

三、改變前面五大數值點的樣式，首先要計算出前面五大數據，而後根據這五大數據另外添個data數據顯示，以下面代碼，在series再添加個配置：

series: [
        {
            //前面說過的配置
        },
        //後面新增配置
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 5)),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#99CC99',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]

};

到此就完成整個配置了：

clipboard.png

固然，還有不少配置項的操做能夠控制整個地圖變成你想要的樣子，官方配置項文檔就能夠查看，這裏就不一一列舉了，舉個例子給大家引導下怎麼玩地圖，如果以爲不錯的請賞個贊！！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程