容器
需要引入echart和引入全国和省份的json数据
需要在mounted()调用画地图方法，数据加载完成
下面就是画地图的配置了，就不一一详细展开说了
全国地图map是“China”，省份地图map是相对应的省份名称
详细代码如下
// 基于准备好的dom，初始化echarts实例
// 中间 地图 ----域外分布（全国地图）
drawMap(id, mapData, towLineData, mapList) {
this.charts = echarts.init(document.getElementById(id));
// 指定图表的配置项和数据
this.charts.setOption({
tooltip: {
// triggerOn: 'click',
enterable: true,
formatter: function (params, ticket, callback) {
if (ponentSubType != "effectScatter") {
return;
}
return ' <div style=" padding: 5px;background: #FFFFFF;box-shadow: 0px 2px 8px 0px rgba(50, 175, 218, 0.8);border-radius: 2px; ">'
+ ' <div style="font-size: 10px;color: #999999;line-height: 20px;">支援机构<span style="font-size: 12px;font-weight: bold;color: #FFB400;margin: 0 3px;">' + Name + '</span></div>'
+ ' <div style="font-size: 10px;color: #999999;line-height: 20px;">支援专家<span style="font-size: 12px;font-weight: bold;color: #FFB400;margin: 0 3px;">' + params.data.num + '</span>人</div>'
+ '<div>'
;
let coords = params.data.coords[0][0];
if (coords) {
mapList.forEach((v) => {
if (coords == parseFloat(Lng).toFixed(6)) {
var tipHtml = '';
tipHtml = ' <div style=" padding: 5px;background: #FFFFFF;box-shadow: 0px 2px 8px 0px rgba(50, 175, 218, 0.8);border-radius: 2px; ">'
+ ' <div style="font-size: 10px;color: #999999;line-height: 20px;">支援机构<span style="font-size: 12px;font-weight: bold;color: #FFB400;margin: 0 3px;">' + Name + '</span></div>'
+ ' <div style="font-size: 10px;color: #999999;line-height: 20px;">支援专家<span style="font-size: 12px;font-weight: bold;color: #FFB400;margin: 0 3px;">' + v.num + '</span>人</div>'
+ '<div>'
;
return tipHtml;
}
});
}
}
},
geo: {
map: "china",
aspectScale: 0.75, //长宽比
zoom: this.mapSize, // 设置地图大小
top: this.mapTop, // 地图距离顶部的位置
roam: true, // 是否缩放
label: {
show: true,
color: "#43adcf",
},
zoom: 1,// 缩放大小
itemStyle: {
normal: {
borderColor: '#3EA7D3',//边界线颜色
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "#fff", // 0% 处的颜色
},
{
offset: 1,
color: "#fff", // 100% 处的颜色
},
],
globalCoord: true, // 缺省为 false
},
// shadowColor: "#3ea7d3",
// shadowOffsetX: 0,
// shadowOffsetY: 3,
},
emphasis: {
areaColor: "#fff",
borderWidth: 0,
color: "#43adcf",
label: {
show: true,
textStyle: {
color: "rgb(183, 185, 14)"
}
},
},
},
regions: [
{
name: "南海诸岛",
itemStyle: {
normal: {
opacity: 0, // 为0不绘制该图形
label: {
show: false,//隐藏文字
color: "#009cc9",
},
},
},
label: {
show: false, // 不显示南海诸岛的文字
}
},
],
},
// visualMap: {
// type: "piecewise",
// left: "5%",
// top: "78%",
// min: 0,
// color: ["#f16507", "#ecd220", "#00a0e9"], //设置坐标点从小到大的颜色
// pieces: [
// {
// lte: 7,
// label: "7天以内",
// // symbol: 'circle',
// },
// {
// gt: 7,
// lte: 30,
// label: "7天至一个月",
// // symbol: 'circle',
// },
// {
// gt: 30,
// // lte: 3000,
// label: "一个月以上",
// // symbol: 'circle',
// },
// ],
// textStyle: {
// color: "#3488DB",
// fontSize: 16,
// },
// itemWidth: 10,
// itemHeig10,
// },
series: [
{
type: "map",
roam: false,
geoIndex: 0, // 海南诸岛屿字体消失
label: {
normal: {
show: true, // 显示省份名称
position: 'inside', // 文本标签显示的位置
textStyle: {
color: "#1DE9B6",
fontSize: 8,
},
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
borderWidth: 2,//边际线大小
borderColor: '#3EA7D3',//边界线颜色
areaColor: '#ffffff',//默认区域颜色
shadowColor: '#ffffff',//阴影颜色
},
emphasis: {
show: true,
areaColor: '#3EA7D3',//鼠标滑过区域颜色
label: {
show: true,
textStyle: {
color: '#fff'
}
}
}
},
zoom: 5,
map: "china", //使用
},
{
type: "effectScatter",
coordinateSystem: "geo",
showEffectOn: "render",
zlevel: 1,
rippleEffect: {
period: 15,
scale: 4,
brushType: "fill",
},
hoverAnimation: true,
label: {
normal: {
formatter: "{b}",
position: "right",
offset: [15, 0],
color: "#3ea7d3",
show: true,
},
},
itemStyle: {
normal: {
color: "#3ea7d3",
shadowBlur: 8,
shadowColor: "#333",
},
},
symbolSize: 12,
data: mapData, // 圆点位置
// data: [
// { value: [118.8062, 31.9208], itemStyle: { color: "#FFAE3B" } },
//],
}, //地图线的动画效果
{
type: "lines",
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
normal: {
color: "#3EA7D3",
width: 1, //线条宽度
opacity: 0.1, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
},
},
data: towLineData,
// data: [
// {
// coords: [
// [118.8062, 31.9208],
// [119.4543, 25.9222],
// ],
// lineStyle: { color: ["#3ea7d3",] },// 每个省份线条颜色
// },
// ],
},
],
}, true);
this.charts.getZr().on('click', (param) => {
// alert(param.nname + param.value);
});
this.charts.resize();
},
大家有遇到类似的需求，欢迎探讨交流呀！Q:24227744930
