一、需求:效果图如下,各国家数据呈现流入中国效果(漫入)
二、前端如何实现
1. 实现方式:使用echarts,详细配置项可参见echarts官网
2. 实现分析:
- 地图实现可使用echarts的geo组件(geo: 地理坐标系). geo组件需要引入对应的地图数据,此处的引入方式是引入JSON 文件,通过 AJAX 异步加载后手动注册。
- 地图上的线动画效果可使用effect配置
- 地图上的城市坐标点可使用effectScatter配置
3. 代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<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