vue+echarts地图（一） 实现了全国省市地图，无下钻功能

一、安装echarts依赖

npm install echarts -S

使用淘宝的镜像安装

1、安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、使用

    cnpm install echarts -S

二、全局引入(在main.js中引入)

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

三、新建vue文件及容器
// 新建文件：例如：Map.vue

//容器：
四、具体实现

let mapContainerId = {};                                        
export default {
  name: "mapEcharts",
  data() {
    return {
      chinaId: "000000", // 地图 code
      chinaName: "china", // 地图 区域名
      chinaJson: null // 地图 json数据
    };
  },
  mounted() {
    const testJson = require("./../assets/mapJson/" + this.chinaId + ".json");          // 获取地图json文件
    this.chinaJson = testJson;
    console.log(testJson);
    this.mapFn();                                                                       // 调用地图
  },
  methods: {
    mapFn() {
      console.log(this.chinaName, this.chinaJson, this.chinaId);
      mapContainerId = this.$echarts.init(document.getElementById("mapEc"));             // 初始化dom
      this.mapOption(                                                                    
        mapContainerId,                                                                  
        this.chinaId,
        this.chinaName,
        this.chinaJson
      );
    },
    // 地图option
    mapOption(myChart, id, name, mapJson) {
      this.$echarts.registerMap(name, mapJson);
      myChart.setOption({
        visualMap: {                                    // 视觉映射组件，用于进行『视觉编码』
          min: 0,                                       // 最小值
          max: 100,                                     // 最大值
          left: 40,                                     // 组件所在位置（left, right, top, bottom）
          bottom: 40,
          pieces: [                                     // 组件的值域显示
            {
              gt: 0,                                   // lt：小于，lte小于等于，gt大于，gte大于等于
              lte: 20,
              label: "0[

作者博客地址：http://lwenl.cn
编写不易，勿喷，希望能帮助到您