这段代码的主要功能是在页面加载完成后,初始化一个 echarts
地图图表,并配置了相关的地理数据、散点数据、线条数据以及样式效果,最后在指定的 div
元素中进行展示。
需要再vue中的框架实现,不能单独直接运行。
标注
type: 'effectScatter'
表示这是一个带有特效的散点图。coordinateSystem: 'geo'
表明其坐标系统基于地理坐标系。label
配置了标签的显示格式、位置和是否显示。itemStyle
设定了元素的阴影模糊度、阴影颜色和自身颜色。symbolSize: 20
定义了散点的大小。rippleEffect
配置了涟漪效果的相关参数。data
数组中包含了几个具有名称和坐标值的城市数据,用于在地图上显示散点。
代码:
html
{
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
数组中包含了两组坐标数据,用于绘制线条。
html
//箭头动画
{
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 像素。
html
<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>