vue+echarts实现中国地图流动效果

@vue+echarts实现中国地图流动效果

这几天在写vue项目，遇到要用echarts中国地图的情况，故上网去搜索，无奈方法五花八门，根本一点都不系统，而且有的文章完全胡说八道。按他的方法根本地图都出不来，用最近比较流行的一句话概括：

话不多说看效果图

操作步骤：

1. 执行命令:npm install echarts -s 并回车
   

2. 看到这样的提示代表安装成功 PS：网络不好的情况建议用cnpm淘宝镜像（全局终端执行命令：npm i -g cnpm --registry=https://registry.npm.taobao.org）

3. 下载china.js（提取码：a5b9）
   点击下载

4. 引入

import echarts from 'echarts/lib/echarts';
import '@/map/china.js';

5. 写一个echarts容器 绑定ref

<div class="wrapper">
  <div class="map-container" style="width: 100%; height: 100%" ref="myEchart" ></div>
</div>

6. 配置option (有必要的注释都已标记)

<script>
let echarts = require("echarts");
import "echarts/lib/component/markLine";
mounted(){
   
 let data = [
 			{
    "name": "北京", "dataCount": [0, 1, 0, 0, 0, 0, 1], "id": "247" }, {
   
 			"name": "天津",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "248"
 		}, {
    "name": "河北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "249" }, {
   
 			"name": "山西",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "250"
 		}, {
    "name": "内蒙古", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "251" }, {
   
 			"name": "辽宁",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "252"
 		}, {
    "name": "吉林", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "253" }, {
   
 			"name": "黑龙江",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "254"
 		}, {
    "name": "上海", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "255" }, {
   
 			"name": "江苏",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "256"
 		}, {
    "name": "浙江", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "257" }, {
   
 			"name": "安徽",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "258"
 		}, {
    "name": "福建", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "259" }, {
   
 			"name": "江西",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "260"
 		}, {
    "name": "山东", "dataCount": [14235, 820, 0, 35, 0, 0, 4],