阅读量:0
这段代码的主要功能是在页面加载完成后，初始化一个 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>
