先看效果：
前提
npm i echarts
下面代码可直接食用：
代码：
<template>
<div class="echarts">
<div :style="{height:'500px',width:'500px'}" ref="myEchart"></div>
</div>
</template>
<script>
import echarts from "echarts";
var geoCoordMap = {
ww: [100, 100],
xx: [200.00461, 200.01165],
zz: [400.00461, 300.08395],
cc: [300.8432, 300.08395],
zjq: [400.8432, 100.08395],
yy: [250, 500]
};
export default {
mounted() {
this.chinaConfigure();
},
methods: {
chinaConfigure() {
let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
window.onresize = myChart.resize;
myChart.setOption({
backgroundColor: "#000079",
geo: {
map: "zjq"
},
series: [
{
type: "lines",
zlevel: 1,
effect: {
show: true,
period: 5, //箭头指向速度，值越小速度越快
trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", //箭头图标
symbolSize: 6 //图标大小
},
lineStyle: {
normal: {
color: "#a6c84c",
width: 0.2, //尾迹线条宽度
opacity: 0.2, //尾迹线条透明度
curveness: 0.3 //尾迹线条曲直度
},
emphasis: {
width: 3,
opacity: 0.5
}
},
data: [
{
coords: [geoCoordMap["yy"], geoCoordMap["xx"]]
},
{
coords: [geoCoordMap["yy"], geoCoordMap["ww"]]
},
{
coords: [geoCoordMap["yy"], geoCoordMap["zz"]]
},
{
coords: [geoCoordMap["yy"], geoCoordMap["cc"]]
},
{
coords: [geoCoordMap["yy"], geoCoordMap["zjq"]]
}
]
}
]
});
}
}
};
</script>
<style scoped>
.echarts {
height: 100%;
width: 100%;
display: block;
}
</style>
