vue-element中使用echarts地图

搭建vue+element环境
① 使用官网模板 git clone https://github.com/ElementUI/element-starter.git
② 安装依赖 npm install --registry=https://registry.npm.taobao.org
③ 运行项目: 使用webstorm,VS-Code,或者命令npm run dev
/node_modules/echarts/map/js/province/beijing 在这里各省份的地图,中国地图都有可以自定义切换 显示 标签 颜色 等等 任你发挥

1 package.json

{
  "name": "element-starter",
  "description": "A Vue.js project",
  "author": "yi.shyang@ele.me",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --env.dev",
    "build": "rimraf dist && webpack -p --progress --hide-modules"
  },
  "dependencies": {
    "element-ui": "^2.3.4",
    "vue": "^2.5.16",
    "echarts": "^4.1.0"
  },
  "engines": {
    "node": ">=6"
  },
  "devDependencies": {
    "autoprefixer": "^6.6.0",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.0",
    "babel-preset-vue-app": "^1.2.0",
    "css-loader": "^0.27.0",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^2.24.1",
    "postcss-loader": "^1.3.3",
    "rimraf": "^2.5.4",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.2"
  }
}

2 main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
Vue.use(ElementUI);
new Vue({
  el: '#app',
  render: h => h(App)
});

3 app.vue

<template>
    <div id="app">
        <!--<img src="./assets/logo.png">-->
        <div id="beijing_map" style="width:1000px;height:999px"></div>
    </div>
</template>
<script>
  import echarts from "echarts"
  import "../node_modules/echarts/map/js/province/beijing";

  export default {
    mounted() {
      let myChart = echarts.init(document.getElementById('beijing_map'));
      let option = {
        series: [
          {
            name: "北京",
            type: 'map',
            mapType: "北京",
            label: {
              normal: {
                show: true,//显示省份标签
              },
              emphasis: {
                show: true,//对应的鼠标悬浮效果
              }
            },
          }
        ]
      };
      myChart.setOption(option);
      console.log(111)
    },
  }
</script>

4 运行结果

image.png

5 源码下载

https://github.com/gzz2017gzz/spring-boot2-example/tree/master/77-vue-echarts-map