這段代碼的主要功能是在頁面加載完成后，初始化一個?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>

?