echarts实现地图漫入漫出效果

一、需求：效果图如下，各国家数据呈现流入中国效果（漫入）

 

二、前端如何实现

1. 实现方式：使用echarts，详细配置项可参见echarts官网

2. 实现分析：

• 地图实现可使用echarts的geo组件（geo: 地理坐标系). geo组件需要引入对应的地图数据，此处的引入方式是引入JSON 文件，通过 AJAX 异步加载后手动注册。
• 地图上的线动画效果可使用effect配置
• 地图上的城市坐标点可使用effectScatter配置

3. 代码如下：

<template>
  <view-template class="a2-roam">
    <div id="chart" style="width: 1360px; height:1200px;"></div>
  </view-template>
</template>
<script>
import echarts from 'echarts';

import world from '../assets/mapData/world_geo.json';
import worldGeoCoordMap from '../assets/mapData/worldPosition.js';

export default {
  data() {
    return {
      chart: null,
      color: ['#33ff77', '#fff066', '#00ffff', '#33ff77', '#fff066', '#00ffff', '#33ff77', '#fff066', '#00ffff