基于vue的地图特效（飞线和标注）

这段代码的主要功能是在页面加载完成后，初始化一个 echarts 地图图表，并配置了相关的地理数据、散点数据、线条数据以及样式效果，最后在指定的 div 元素中进行展示。

需要再vue中的框架实现，不能单独直接运行。

标注

• type: 'effectScatter' 表示这是一个带有特效的散点图。
• coordinateSystem: 'geo' 表明其坐标系统基于地理坐标系。
• label 配置了标签的显示格式、位置和是否显示。
• itemStyle 设定了元素的阴影模糊度、阴影颜色和自身颜色。
• symbolSize: 20 定义了散点的大小。
• rippleEffect 配置了涟漪效果的相关参数。
• data 数组中包含了几个具有名称和坐标值的城市数据，用于在地图上显示散点。

代码：

{type: 'effectScatter',coordinateSystem: 'geo',label: {formatter: '{b}',position: 'right',show: true},itemStyle: {shadowBlur: 10,shadowColor: '#f00',color:'#f00'},symbolSize:20,rippleEffect: {brushType: 'stroke',scale:3},data:[{name:'北京',value: [116.46, 39.92]},{name:'乌鲁木齐',value: [87.68, 43.77]},{name:'海口',value:  [110.35, 20.02]},{name:'大连',value: [121.62, 38.92]}],},

飞线

• type: "lines" 表示这是一个线条类型的图表。
• effect 配置了线条的特效显示相关参数，如是否显示、周期和符号。
• lineStyle 设定了线条的颜色、宽度、透明度和弯曲度。
• data 数组中包含了两组坐标数据，用于绘制线条。

 //箭头动画{type:"lines",effect:{show:true,period:5,shmbol:'arrow',symbolSize:10},lineStyle:{color:'#C1A43C',width:1,opacity:1,curveness:0.1,},data:[[{coord: [91.11, 29.97],},{coord:[121.48, 31.22]}],[{coord:  [110.35, 20.02]},{coord: [121.62, 38.92]}]]}

完整代码：

<script setup> 部分：

• 引入了 Vue 的 ref、reactive 和 onMounted 钩子，以及 echarts 库和中国地图数据 chinaMap 。
• 定义了一个 ref 变量 chart ，用于引用模板中的 div 元素。
• 在 onMounted 钩子中调用 chartInit 函数进行图表的初始化。
• chartInit 函数中：
  • 使用 echarts.init 基于 chart.value 初始化图表实例 myChart 。
  • 注册了名为 china 的地图。
  • 配置了图表的选项 option ，包括地理信息（geo）部分的地图类型、地图数据、标签样式、区域颜色和强调效果等，以及两个系列的数据（一个是散点效果，一个是线条效果），并设置了相关的样式和数据。
  • 最后使用 setOption 方法应用配置选项显示图表。

<template> 部分：

• 定义了一个具有 ref="chart" 属性的 div 元素，用于展示图表，并设置了宽度为 100% ，高度为 600 像素。

<script setup>
import {ref,reactive, onMounted} from 'vue'
import * as echarts from 'echarts';
import chinaMap from '../../assets/json/china.json'let chart =ref();
onMounted(()=>{chartInit()
})
function chartInit(){// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(chart.value);echarts.registerMap('china',chinaMap)// 指定图表的配置项和数据var option = {geo:{type:'map',map:'china',label:{show:true,color:'#fff',fontSize:10},itemStyle:{areaColor:'#4D98FB',borderColor:'#fff'},zoom:1.2,emphasis:{lable:{color:'#333'},itemStyle:{areaColor:"#1BC1AD"}}},series:[{type: 'effectScatter',coordinateSystem: 'geo',label: {formatter: '{b}',position: 'right',show: true},itemStyle: {shadowBlur: 10,shadowColor: '#f00',color:'#f00'},symbolSize:20,rippleEffect: {brushType: 'stroke',scale:3},data:[{name:'北京',value: [116.46, 39.92]},{name:'乌鲁木齐',value: [87.68, 43.77]},{name:'海口',value:  [110.35, 20.02]},{name:'大连',value: [121.62, 38.92]}],},//箭头动画{type:"lines",effect:{show:true,period:5,shmbol:'arrow',symbolSize:10},lineStyle:{color:'#C1A43C',width:1,opacity:1,curveness:0.1,},data:[[{coord: [91.11, 29.97],},{coord:[121.48, 31.22]}],[{coord:  [110.35, 20.02]},{coord: [121.62, 38.92]}]]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
}
</script><template><div ref="chart" style="width: 100%;height:600px;"></div>
</template><style scoped></style>