nuxt + echarts -> 中国地图

下载echarts

npm install echarts

在plugins目录下新建echarts.js文件并引入echarts依赖包

• plugins/echarts.js

import Vue from 'vue'
import * as echartsfrom 'echarts' // 引入echarts

Vue.prototype.$echarts = echarts // 引入组件（将echarts注册为全局）

在nuxt.config.js配置文件中引入创建的echarts.js

plugins: [
    '@/plugins/echarts',
  ],

下载的echarts依赖包里面没有中国地图数据

• 可以自己下载中国地图json数据，我把它放在了/static/json/china.json里面。
• 下载地址 http://datav.aliyun.com/portal/school/atlas/area_selector
• 在plugins/echarts.js引入

import china from '@/static/json/china.json';// 引入中国地图数据
echarts.registerMap('china', china) // 使用该数据

使用

• 常态地图效果

  
  
  image.png

• 鼠标点击区域后的自定义提示框

  
  
  image.png