VueJs - 世界地圖（根據返回國家value值的大小來展示顏色的深淺分布）

一、實現功能

1、畫出世界各國的世界地圖

2、根據返回name->國家全稱、value->數量，渲染對比世界各國成功的國家，予以值域范圍的高亮

3、滑入國家地圖，出現tooltip框，提示當前國家和訪問量

 

二、demo展示

　　　　　　　根據value的number大小，各國家顏色深淺不一　　　　　　　　　　　　　　　　滑入某國，會提示當前國家和訪問量

   

三、實現思路

1、下載echarts

2、全局引入echarts（如果項目中還需要繪制其他圖表，建議引用在全局。或者分別在各個vue文件中引入echarts小模塊）

3、繪制地圖

　　a、在沒有任何視覺交互的情況下，也沒有任何返回的國家和value的情況下，我們需要默認畫出所有國家。顏色統一，這就需要我們本地有一個 world.js 存放或引入世界各國的json數據，寶包括國家名稱、經緯度等信息。

　　b、准備一個dom，設置好寬高。

　　c、初始化echarts對象並且和dom進行綁定

　　d、編寫最后需注入echarts的set方法的options對象

　　e、xxxxx.setOption(options) 注入完成，地圖顯示出來

三、實現方法

1、安裝echarts

npm install echarts --save

2、在main.js中引入

import Vue from 'vue'
import App from './App'
import router from './router'

// 引入echarts
import echarts from 'echarts'

//將echarts對象掛在vue實例的原型對象上
//在全局可通過this.$echarts調用echarts對象
Vue.prototype.$echarts = echarts

Vue.config.productionTip = false

/* 實例化vue對象 */
let gvm = new Vue({
    el: '#app',
    router,
    components: {
        App
    },
    template: '<App/>'
})

3、map.vue 初始化，繪制世界地圖

<template>
    <div>
        <el-container>
                        <!-- 為echarts准備的dom -->
            <div id="map"></div>
        </el-container>
    </div>
</template>

drawLine(data) {
    // 基於准備好的dom，初始化echarts實例
    let myChart = this.$echarts.init(document.getElementById('map'))
    //因后台返回的格式value是string類型，前端需要number類型的value，再此處理數據。
    var map1 = []
    for(var i = 0; i < data.data.map.length; i++) {
        var obj = {}
        obj.name = data.data.map[i].name;
        obj.value = [parseInt(data.data.map[i].value[0]), data.data.map[i].name]
        map1.push(obj)
    }

    myChart.setOption({
        baseOption: {
            visualMap: [{
                dimension: 0,
                left: 10,
                bottom: 35,
                orient: 'horizontal',
                itemWidth: 12,
                min: map1[0].value[0],
                max: map1[max1].value[0],
                text: ['High', 'Low'],
                textStyle: {
                    color: '#4a4a4a'
                },
                inRange: {
                    color: ['#d9e4fb', '#d8e3fa', '#88bbee', '#6ca5dc', '#6199d0', '#5d96cd', '#5890c7']
                }
            }],
            animationDurationUpdate: 1000,
            animationEasingUpdate: 'quinticInOut',
            timeline: {
                show: false
            },
            backgroundColor: '#ffffff',
            title: [{
                text: 'Total Visits Count',
                left: 45,
                bottom: 65,
                textStyle: {
                    fontSize: 12,
                    color: 'rgba(255,255,255, 0.9)'
                }
            }],
            tooltip: {},
            grid: {
                left: '10%',
                right: '45%',
                top: '70%',
                bottom: 20
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            series: [{
                id: 'map',
                type: 'map',
                mapType: 'world',
                right: "1%",
                top: "7%",
                bottom: "1%",
                left: 10,
                itemStyle: {
                    normal: {
                        areaColor: "#ecedfe", //地圖模塊未選中顏色
                        borderColor: "#d8d8de" //地圖模塊邊框
                    },
                    emphasis: {
                        label: {
                            show: true
                        },
                        areaColor: "#90ed7d" //選中模塊顏色
                    }
                },
                data: data.data.map
            }]
        },
    });
    window.onresize = () => {
        myChart.resize();
        myChart1.resize();
    };
}

//貼出json格式，
"map":[
        {
            "name": "United States",
            "value": [345,"United States"]
        },{
            "name": "China",
            "value": [200,"China"]
        }
]

 

四、遇到的問題

在此特別強調一下。因為這部分在做項目的時候報錯，找不到原因，也沒有想到是這部分原因，廢了好大的功夫才找到。貼出錯誤：

原因：

1、返回數據的name的值和value數組的第二項一定要對應並且這里name的要求是國家全稱，要和本地渲染地圖的world.js對應上，否則會報錯。

2、value的第一項一定是number類型，否則也會報錯。

　　a、在此聲明一下，echarts map在series里的data的要求返回格式沒有那么嚴格。只有值域縮放控件（baseOption）的value第一項必須是number類型。

 

解決方案：

1、請把node_modules/echarts/map/js/ 下面找找world.json給他，讓他按照這個name返回。否則v8 console會報錯。

2、value的第一項的類型挺簡單，后台如果不返回number類型的話自己使用如下代碼處理一下。以下是處理方法：

var map1 = []
for(var i = 0; i < data.data.map.length; i++) {
　　var obj = {}
　　obj.name = data.data.map[i].name;
　　obj.value = [parseInt(data.data.map[i].value[0]), data.data.map[i].name]
　　map1.push(obj)
}

data.data.map是上面json對象