vue-cli用echarts实现地图

在已经安装了vue-cli的情况下，创建项目 epidemis-map

vue create epidemis-map

安装需要的组件

npm install axios vue-router

创建mixin文件夹 新建index.js 用于封装axios请求，混入到Vue中，在main.js中引用，可全局使用
创建router文件夹 新建index.js 配置路由Home.vue，将router引入main.js中
创建page文件夹 新建Home.vue，在Home.vue中引入组件Map.vue
public中新建data.json，模拟数据

router > index.js中代码如下：

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter)
let router = new VueRouter({
  routes:[
      {
          path:'/',
          component:()=>import('@/page/Home')
      }
  ]  
})
export default router

mixin > index.js代码如下：

import Vue from "vue";
import axios from "axios";
Vue.mixin({
    methods: {
        $getData(url,params){
            return axios.get(url,{params})
        },
        $postData(url,data){
            return axios.post(url,data)
        }
    },
})

main.js代码如下：

import Vue from 'vue'
import App from './App.vue'
import './mixin/index.js'
import router from "./router"
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

App.vue中代码如下：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Home.vue中代码如下：

<template> 
    <div>
        <Map></Map>
    </div>
</template>
<script>
import Map from '@/components/Map'
export default {
    components:{
        Map
    }
}
</script>

Map.vue中代码如下：

<template>
    <div>
        <div id="container"></div> 
    </div>
</template>
<script>
import echarts from 'echarts'
import 'echarts/map/js/china'
export default {
    async mounted() {
        var myChart = echarts.init(document.getElementById('container'));        
        // 指定图表的配置项和数据
        let res = await this.$getData('/data.json');
        let data = res.data.map(item=>{
            return {
                name:item.name,
                value:item.count
            }
        })
        console.log(data)
        var option = {
            title: {
                    text: 'XXX产量国内分布',
                    subtext:'@XXXXX',
                    left:'center'
                    },
            tooltip: {
               formatter:function(res){
                   console.log(res)
            return `
            ${res.name}</br>
            产量：${res.value}</br>
            `
        }
            },
            visualMap: {
            pieces: [
                {gt: 1000, lte: 9999,label:'>9999',color:'rgb(14, 107, 14)'},  
                {gt: 99, lte: 999, label:'99-999',color:'rgb(34, 177, 34)' } ,
                {gt: 9, lte: 99, label: '10-99',color:'rgb(108, 245, 108)'},
                {gt: 0,lte:9, label: '<10', color: 'rgb(196, 248, 196)'},
                {value: 0,color:'#fff',label:'0'}                 
                ]
    },
            legend: {
                right:0
                    },
            series: [{
                        type: 'map',
                        map:'china',
                        name:"产量",
                        data
                    }]
                }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
    },
    methods: {

    },
}
</script>
<style scoped>
#container{
    width: 600px;
    height: 600px;
    margin: 10px auto;
    border: 1px solid #eee;
    padding: 10px;
}
</style>

效果图如下：