vue如何导入echarts地图

这篇文章主要为大家展示了“vue如何导入echarts地图”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何导入echarts地图”这篇文章吧。

成都创新互联专业为企业提供马边彝族网站建设、马边彝族做网站、马边彝族网站设计、马边彝族网站制作等企业网站建设、网页设计与制作、马边彝族企业网站模板建站服务，十多年马边彝族做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

导入方法：1、使用“npm install echarts -S”命令安装echarts依赖；2、在“main.js”中全局引入echarts；3、在需要地图的页面中使用import语句引入“china.js”文件，添加相关代码即可。

本教程操作环境：windows7系统、vue2.9.6版、DELL G3电脑。

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

配置：

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' // 引入中国地图数据

使用：

完整实例代码：

 


.Page{
  position: relative;
}
.projectList{
  position: absolute;
  bottom:0;
  left:0;
  z-index: 100;
  width: 280px;
  height: 150px;
  background: linear-gradient(#1d4978, #081630);
  display: flex;
  flex-wrap:wrap;
  justify-content:space-around;
  align-items:center;  
}
.projectList>div{
  width: 120px;
  height: 55px;
}
.projectList>div>p{
  color: #fff;
  font-size: 16px;
}
.projectList>div>p>i{
  color: #12baf9;
}
.inputList{
  width: 120px;
  height: 30px;
  background: #1a3c7b;
  border: 2px solid #0f5390;
  margin-top:7px;
  border-radius: 5px;
  letter-spacing:5px;
  color: #65ddd3;
  line-height: 26px;
  text-indent: 1em;
}
 
 
#box{
  width:280px;
  height: 80px;
  background: #026295;
  box-shadow: 0 0 10px #008b9a;
  border: 1px solid #008b9a;
  position: absolute;
  top:10px;
  left: 50%;
  margin-left: -140px;
  color: #fff;
  text-align: center;
}
.box_left{
  width: 239px;
  height: 80px;
  float: left;
}
.box_title{
  width: 238px;
  height: 30px;
  border-bottom: 1px solid #008b9a;
  line-height: 30px;
}
.box_list{
  width: 119px;
  height: 50px;
  float: left;
}
.box_lists{
  border-left: 1px solid #008b9a;
}
.box_list>p:nth-child(1){
  font-size: 20px;
  line-height: 28px;
  color: yellow;
}
.box_lists>p:nth-child(1){
  color: rgb(111, 185, 234);
}
 
.box_right{
  width: 39px;
  height: 80px;
  border-left: 1px solid #008b9a;
  float: left;
}
.box_right i{
  line-height: 80px;
}
 
 
 
.dilog {
  /* width: 180px; */
  height: 80px;
  background: black;
  position: absolute;
  border-radius: 5px;
  border: solid 1px rgb(0, 139, 154);
  z-index: 11111;
  display: flex;
  box-shadow: 0 0 10px rgb(0, 139, 154);
}
.dilog_title {
  text-align: center;
  height: 30px;
  border-bottom: solid 1px grey;
  line-height: 30px;
  color: white;
}
.box_Tips{
  width:96%;
  height: 20px;
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 14px;
  color: #fff;
}
.box_Tips>p{
  white-space: nowrap;
  position: absolute;
  top: 0px;
  left: 0;
  animation:mymove 30s infinite;
}
@keyframes mymove
{
from {left: 70%;}
to {left: 0%;}
}

以上是“vue如何导入echarts地图”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

文章名称：vue如何导入echarts地图
分享URL：http://bjjierui.cn/article/jdehos.html