效果图如上
前提是安装Echarts并引入
并且配置中国地图json文件这些都在同账号另一篇博客上有说明，查看请自行移步
下展示代码
<template>
<div class="managingPatientSize">
<el-row>
<el-col :span="6">1</el-col>
<el-col :span="12">
<div id="china-map"></div>
</el-col>
<el-col :span="6">1</el-col>
</el-row>
</div>
</template> <script>
export default {
data() {
return {
};
},
mounted() {
this.china_map();
},
methods: {
/*
和后台联动思路：后台传数据给你，也就是我这边模拟的lineData这个数组的数据格式一样就行。如果字段名字变动，自己前台更改一下就可以了。
lineData这个结构解释一下：
val：数据，也就是你想展示的数据可以放里面。鼠标移动上去后可以看到
blat：发射点，也就是你要从哪里发射一个射线出去，就给个这个地方的坐标就行了。后台的坐标你可以直接发送这个chinaGeoCoordMap数组的给他，让他用这个坐标来
elon：接收点，就是你发射出去的射线哪个省接收这个射线，写一个接收省的坐标
bcitysim：发射省的名字
ecitysim：接收省的名字
*/
china_map() {
let mapChart = this.$echarts.init(document.getElementById("china-map"));//图表初始化，china-map是绑定的元素
window.onresize = mapChart.resize;//如果容器变大小，自适应从新构图
let series = [];//存放循环配置项
let res = [];//存放射线的起始点和结束点位置
let province = [];//存放有射线的省的名字，以此来拿到对应省份的坐标
//提前存好的所有省份坐标，用于后面根据名字拿到对应的左边
let chinaGeoCoordMap = {
新疆: [86.9023, 41.148],
西藏: [87.8695, 31.6846],
内蒙古: [110.5977, 41.3408],
青海: [95.2402, 35.4199],
四川: [102.9199, 30.1904],
黑龙江: [128.1445, 46.7156],
甘肃: [102.7129, 38.166],
云南: [101.0652, 24.6807],
广西: [108.7813, 23.6426],
湖南: [111.5332, 27.3779],
陕西: [108.5996, 33.7396],
广东: [113.8668, 22.8076],
吉林: [126.1746, 43.5938],
河北: [115.4004, 38.1688],
湖北: [112.2363, 30.8572],
贵州: [106.6113, 26.6385],
山东: [118.2402, 36.2307],
江西: [115.7156, 27.99],
河南: [113.0668, 33.8818],
辽宁: [123.0438, 41.0889],
山西: [112.4121, 36.6611],
安徽: [117.2461, 31.0361],
福建: [118.3008, 25.9277],
浙江: [120.498, 29.0918],
江苏: [119.8586, 32.915],
重庆: [107.7539, 29.8904],
宁夏: [105.9961, 37.1096],
海南: [109.9512, 19.2041],
台湾: [120.8254, 23.5986],
北京: [116.4551, 40.2539],
天津: [117.4219, 39.4189],
上海: [121.4648, 31.2891],
香港: [114.6178, 22.3242],
澳门: [113.5547, 21.6484],
};
//后台给的数据
let lineData = [
{
val: 32, //数据
blat: [86.9023, 41.148], //发射点
elon: [87.8695, 31.6846], //接收点
bcitysim: "新疆",//发射省的名字
ecitysim: "西藏",//接收省的名字
},
{
val: 32,
blat: [87.8695, 31.6846],
elon: [95.2402, 35.4199],
bcitysim: "西藏",
ecitysim: "青海",
},
{
val: 32,
blat: [86.9023, 41.148],
elon: [95.2402, 35.4199],
bcitysim: "新疆",
ecitysim: "青海",
},
];
//循环拿到处理好的数据
for (var i = 0; i < lineData.length; i++) {
province.push(lineData[i].bcitysim);//存进去每个省的名字
province.push(lineData[i].ecitysim);//存进去每个省的名字
res.push({
fromName: lineData[i].bcitysim, //发射的省名，保存用于弹框显示
toName: lineData[i].ecitysim, //接收的省名，保存用于弹框显示
coords: [
lineData[i].blat, //发射
lineData[i].elon, //接收
],
count: lineData[i].val, //数据
});
}
let index_data = new Set(province);//把省的名字去重
let data_res = [];//定义一个新的变量存放省的坐标 //注意这里一定要用name和value的形式。不是这个格式的散点图显示不出来
index_data.forEach((item) => {
data_res.push({
name: item,//每个省的名字
value: chinaGeoCoordMap[item],//每个省的坐标
});
});
//循环往series内添加配置项
series.push(
{
//射线效果图层
type: "lines", //类型：射线
zlevel: 1, //类似图层效果
effect: {
show: true,//是否显示图标
symbol: "arrow",//箭头图标
symbolSize: 5,//图标大小
trailLength: 0.02,//特效尾迹长度[0,1]值越大，尾迹越长重
},
label: {
show: true,
},
lineStyle: {
color: "#fff",
normal: {
color: "#fff",
width: 1,//尾迹线条宽度
opacity: 0.5,//尾迹线条透明度
curveness: 0.1,//尾迹线条曲直度
},
},
//提示框信息
tooltip: {
formatter: function (param) {
return (
param.data.fromName +
">" +
param.data.toName +
"<br>数量：" +
param.data.count
);
},
},
data: res, //拿到射线的起始点和结束点
},
//散点图
{
type: "effectScatter",//散点图
coordinateSystem: "geo",//这个不能删，删了不显示
zlevel: 1,
rippleEffect: {
//涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: "stroke", //波纹绘制方式 stroke, fill
scale: 4, //波纹圆环最大限制，值越大波纹越大
},
//设置文字部分
label: {
normal: {
show: true, //省份名显示隐藏
position: "right", //省份名显示位置
offset: [5, 0], //省份名偏移设置
formatter: function (params) {
//圆环显示省份名
return params.name; //这个名字是根据data中的name来显示的
},
fontSize: 12,//文字大小
},
emphasis: {
show: true,
},
},
symbol: "circle",//散点图
symbolSize: 5,//散点大小
itemStyle: {//散点样式
normal: {
show: true,
color: "#fff",
},
},
data: data_res, //处理好后的散点图坐标数组
},
//点击高亮
{
type: "map",
mapType: "china",
zlevel: 1,
roam: true,
geoIndex: 0,
tooltip: {
show: true,
},
itemStyle: {
areaColor: "#00196d",
borderColor: "#0a53e9",
},
emphasis: {
show: true,
label: {
normal: {
show: true, // 是否显示对应地名
textStyle: {
color: "#fff",
},
},
},
itemStyle: {
areaColor: "#00196d",
borderColor: "#0a53e9",
},
},
}
);
//配置
let option = {
//title可要可不要 // title: {
// text: "查查的地图",
// textStyle: {
// color: "#ffffff",
// },
// },
legend: {
show: true,
selected: {},
x: "left",
orient: "vertical",
textStyle: {
color: "white",
},
data: [],
},
//鼠标移上去的弹框
tooltip: {
trigger: "item",
show: true,
},
//geo：这是重点
geo: {
map: "china", //中国地图
zoom: 1.2, //缩放倍数
roam: true, //是否允许缩放和拖拽地图
label: {
normal: {
show: false, // 是否显示省份名字，现在是隐藏的状态，因为和散点图的名字重叠了。如果需要就true
textStyle: {//名字的样式
color: "#fff",
},
},
emphasis: {
show: true,
},
},
//地图样式
itemStyle: {
normal: {
borderColor: "#293171", //地图边框颜色
borderWidth: "2", //地图边框粗细
areaColor: "#0A0F33", //地图背景色
},
//省份地图阴影
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "#fff",
},
},
},
series: series,//图表配置
};
mapChart.setOption(option);//生成图表
},
},
};
</script> <style lang="scss" scoped>
.managingPatientSize {
height: 100%;
background-color: #111b41;
color: #fff;
.el-row {
height: 100%;
.el-col {
height: 100%;
position: relative;
#china-map {
height: 100%;
}
}
}
}
</style>
转自CSND博主:接口写好了吗
![[Unity UGUI]ScrollRect效果大全](https://www.kunjuke.com/file/css/thumb/11.jpg/280-180.jpg)