VueJs - 世界地图（根据返回国家value值的大小来展示颜色的深浅分布）

一、实现功能

1、画出世界各国的世界地图

2、根据返回name->国家全称、value->数量，渲染对比世界各国成功的国家，予以值域范围的高亮

3、滑入国家地图，出现tooltip框，提示当前国家和访问量

二、demo展示

　　　　　　　根据value的number大小，各国家颜色深浅不一　　　　　　　　　　　　　　　　滑入某国，会提示当前国家和访问量

VueJs - 世界地图（根据返回国家value值的大小来展示颜色的深浅分布）

三、实现思路

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>

模板