vue + echarts + china.js 中国地图

效果图

原型

点击标点

1. 引入echarts 

npm install echarts --save

2.在main.js

// 引入echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3.在需要引入地图的页面

// 引入基本模板

let echarts = require('echarts/lib/echarts')

import '@/assets/js/china.js' // 引入中国地图数据

引入的china.js代码在这里拿  https://blog.csdn.net/qq_42221334/article/details/95493484

4.全部代码

  .map-btn{

    margin: 50px auto 70px;

    text-align: center;

    .btn{

      margin: 0 10px;

    }

    .year-select{

      display: inline-block;

      margin: 0 30px;

    }

  }

  ::v-deep{

  }

  .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:270px;

  height: 240px;

  line-height: 29px;

  font-size: 14px;

  padding: 5px 15px;

  background: #fff;

  // color: #081630;

  // background: #026295;

  box-shadow: 0 0 10px #3d4141;

  position: absolute;

  top:10px;

  left: 50%;

  margin-left: -140px;

}

.box_left{

  width: 239px;

  height: 80px;

  float: left;

}

.box_title{

  width: 238px;

  height: 30px;

  border-bottom: 1px solid #2a2c2c;

  line-height: 30px;

}

.close-box{

  float: right;

  font-size: 15px;

  margin: 4px;

}

.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%;}

}