使用echarts实现带流向的地图

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

记录大屏可视化开发一
使用echarts实现简单动态地图

一、引入echarts

首先需要去echarts官网下载地址如下
echarts 的官方地址：https://echarts.apache.org/zh/index.html

import * as echarts from 'echarts'//在组件中引入echarts
import china from '@/map/china.json'//中国省份信息的json文件，网上可百度

二、使用步骤

在组件定义一个容器，一定要给宽高,这里是使用vue3 setup语法糖实现的，目前没有添加ts

<template>
 <div ref="mapEchart"  style="width:100%; height:800px"></div>
 </template>
 <script setup>
   import * as echarts from 'echarts'
   import china from '@/map/china.json'
   const mapEchart=ref()
   const points = [
                  {value: [118.8062, 31.9208],itemStyle:{color:'#4ab2e5'}}
                  , {value: [127.9688, 45.368],itemStyle:{color:'#4fb6d2'}}
                  , {value: [110.3467, 41.4899],itemStyle:{color:'#52b9c7'}}
                  , {value: [125.8154, 44.2584],itemStyle:{color:'#5abead'}}
                  , {value: [116.4551, 40.2539],itemStyle:{color:'#f34e2b'}}
                  , {value: [123.1238, 42.1216],itemStyle:{color:'#f56321'}}
                  , {value: [114.4995, 38.1006],itemStyle:{color:'#f56f1c'}}
                  , {value: [117.4219, 39.4189],itemStyle:{color:'#f58414'}}
                  , {value: [112.3352, 37.9413],itemStyle:{color:'#f58f0e'}}
                  , {value: [109.1162, 34.2004],itemStyle:{color:'#f5a305'}}
  ]
 const linePoints=[ {coords: [[118.8062, 31.9208],[119.4543, 25.9222]],lineStyle:{color:'#4ab2e5'}}
                  , {coords: [[127.9688, 45.368],[119.4543, 25.9222]],lineStyle:{color:'#4fb6d2'}}
                  , {coords: [[110.3467, 41.4899],[119.4543, 25.9222]],lineStyle:{color:'#52b9c7'}}]

  onMounted(() => {
    init('china', china)
  })
   const init=(map,value)=>{
    let myecharts=echarts.init(mapEchart.value)
      const options={
		  geo: {//配置地图
            map: map,//地图名称
            zoom: 1.2,//当前视角的缩放比例。
            scaleLimit: 1.6,//缩放比
            scaleLimit: { // 滚轮缩放的极限控制，默认的缩放为1
                min: 0.5,  // 最小的缩放值
                max: 10,  // 最大的缩放值
            },
            roam: true,
            label: {//地图上的文字信息样式配置
                color: '#fff',
                fontSize: '14px',
                show: true
            },
            itemStyle: {//地图区域的多边形 图形样式配置
                areaColor: 'rgb(5,67,160,0.4)',
                borderColor: '#3781F4',
                borderWidth: 2,
                emphasis: {//高亮状态下的多边形和标签样式
                    areaColor: '#3C96FE',
                    borderWidth: 0,
                    color: '#E9BF1A',
                    label: {
                        color: '#E9BF1A',
                        show: false,

                    }
                }
            },
        },
        series: [
            {
                type: 'effectScatter',//带有涟漪效果的
                coordinateSystem: 'geo',//使用坐标系
                effectType: 'ripple',
                showEffectOn: 'render',
                rippleEffect: {
                    period: 10,
                    scale: 4,
                    brushType: 'fill'
                },
                zlevel: 1,
                data: points || [],
            },
            {
                type: 'lines',//地图上的航线
                zlevel: 2,
                symbol: ['none', 'arrow'],
                symbolSize: 10,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: 'arrow',
                    symbolSize: 15
                },
                lineStyle: {
                    color: '#E9BF1A',
                    with: 4,
                    opacity: 0.6,
                    curveness: 0.2
                },
                data: linePoints|| []
            }
        ]
      }
  // 注册地图
    echarts.registerMap(map, value);
    myChart.setOption(option,true)//在setOption()方法中添加true，表示重新绘制地图，
  
   }
	
 </script>

总结

因为工作原因会经常使用到图表，在此记录一下，使用echarts实现简单动态的地图效果