效果图
import chinamapSvg from "../../assets/images/map/map3.svg"; // 引入本地svg图片
geMap() {
let option= {
tooltip: {
show: true,
backgroundColor: "rgba(6,57,133,0)",
borderColor: "#13b8c3",
borderWidth: 0,
shadowColor: "rgba(6,57,133,0)", //发光?效果
shadowBlur: 2,
padding: 6,
textStyle: {
color: "#ffffff00",
},
},
series: [
{
type: "scatter",
coordinateSystem: "geo",
data: [],
symbol: "image://" + require("@/assets/images/map/sunIcon.png"),
symbolSize: [25, 60],
symbolOffset: [0, -35],
},
{
type: "scatter",
coordinateSystem: "geo",
data: [],
symbol: "image://" + require("@/assets/images/map/windIcon.png"),
symbolSize: [25, 60],
symbolOffset: [0, -35],
},
{
type: "scatter",
coordinateSystem: "geo",
data: [],
symbol: "image://" + require("@/assets/images/map/energyIcon.png"),
symbolSize: [25, 60],
symbolOffset: [0, -35],
},
{
type: "scatter",
coordinateSystem: "geo",
data: [],
symbol: "image://" + require("@/assets/images/map/cdIcon.png"),
symbolSize: [25, 60],
symbolOffset: [0, -35],
},
{
type: "scatter",
coordinateSystem: "geo",
data: [],
symbol: "image://" + require("@/assets/images/map/yqIcon.png"),
symbolSize: [25, 60],
symbolOffset: [0, -35],
},
],
}
$.get(chinamapSvg, function (svg) {
echarts.registerMap('organ_diagram', { svg: svg });
option.tooltip.formatter = function (params) {
if (params.componentSubType == "scatter") {
let className = "norSty";
if (params.data.status != "正常") {
className = "abnorSty";
}
let toolTiphtml = "";
let status = params.data.status == undefined ? "未知" : params.data.status;
let power = params.data.power == undefined ? 0 : params.data.power;
let capacity = params.data.capacity == undefined ? 0 : params.data.capacity;
toolTiphtml =
"<div class='toopTip' >" +
"<div class='left'><img class='imgClass' src='" +
vm.imgSrcTooltip(params.data.type) +
"'><div class='" +
className +
"'>" +
status +
"</div></div>" +
"<div class='right'><div class='staName'>" +
params.data.name +
"</div>" +
"<div class='para'><div class='attr'>光伏辐照强度</div><div class='value'>" +
power +
"</div><div class='unit'>MWh</div></div>" +
"<div class='para'><div class='attr'>当日发电量</div><div class='value'>" +
power +
"</div><div class='unit'>MWh</div></div>" +
"<div class='para'><div class='attr'>额定容量</div><div class='value'>" +
capacity +
"</div><div class='unit'>MW</div></div><div>" +
"</div>";
return toolTiphtml;
}
}
option.geo = [
{
show: true,
layoutCenter: ["51.5%", "49.5%"], //位置
layoutSize: '155%', //大小
aspectScale: 0.78,
zoom: 0.64,
map: 'china',
roam: false,
label: {
normal: {
show: false,
textStyle: {
color: "#fff",
fontSize: 0,
},
},
emphasis: {
show: false,
textStyle: {
color: "#fff",
fontSize: 0,
},
},
},
itemStyle: {
normal: {
areaColor: {
type: "linear",
x: 1200,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0.2,
color: "#1A6CED", // 0% 处的颜色
},
{
offset: 0.4,
color: '#0551C1'
},
{
offset: 0.7,
color: "#0462C8", // 0% 处的颜色
},
{
offset: 1,
color: "#1892D8", // 50% 处的颜色
},
],
global: true, // 缺省为 false
},
// borderColor: "#47A4F2",
// borderWidth: 1.5,
// shadowColor: "#4DA8F5",
// shadowOffsetY: 10,
// shadowBlur: 120,
},
emphasis: {
show: false,
areaColor: "transparent",
borderWidth: 0
},
},
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
}
],
},
{
layoutCenter: ["50.5%", "52%"], //位置
layoutSize: '160%', //大小
aspectScale: 0.95,
zoom: 0.65,
roam: false,
map: 'organ_diagram',
itemStyle: {
borderWidth: 0,
},
emphasis: {
focus: 'none',
itemStyle: {
areaColor: '#ffffff',
},
label: {
show: false,
},
},
regions: [
{
name: 'map11',
itemStyle: {
areaColor: 'red',
color: 'red',
},
},
],
},]
mapChart.setOption(option);
window.addEventListener("resize", () => {
mapChart.resize();
});
})
}
这么做就不需要转换坐标了，但是有个弊端就是svg底图和正常引入的js底图的大小需要手动去调整，有略微的差别，有好的解决办法欢迎在评论区留言
因篇幅问题不能全部显示，请点此查看更多更全内容