需求:显示各省名字,滑过标记地显示接入数量,点击标记地 显示系统数量已接入及能跳转对应页面信息的入口;
配置:
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