vue引入echarts中国地图

 

需求：显示各省名字，滑过标记地显示接入数量，点击标记地 显示系统数量已接入及能跳转对应页面信息的入口；

配置：

1.安装依赖

npm install echarts -S

2.全局引入main.js

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

3.在需要地图的页面引入 地图  china.js   查看官方文档  ，我自己保存的 china.js  点击下载（提取码 4rxi ）

import '../../../static/js/chinamap/china.js' // 引入中国地图数据

使用：

完整实例代码：

<template>
  <div class="Page">
    <div id="myChartChina" :style="{width: '100%', height: '710px'}"></div>
    <div class="projectList">
      <div>
        <p> <i class="el-icon-share"></i> 客户数量</p>
        <div class="inputList">3600</div>
      </div>
      <div>
        <p> <i class="el-icon-share"></i> 租户数量</p>
        <div class="inputList">1500</div>
      </div>
      <div>
        <p> <i class="el-icon-share"></i> 控制系统数量</p>
        <div class="inputList">20800</div>
      </div>
      <div>
        <p> <i class="el-icon-share"></i> 接入系统数量</p>
        <div class="inputList">3600</div>
      </div>
    </div>


    <div id="box" v-if="ifbox">
      <div class="box_left