1.首先查看官网示例
2.在vue中使用
2.1注册自己的svg,
在methods,新建一个函数
..... //导入自己的svg import senor from "@/assets/images/holeSenor.svg"; .... createECharts() { let chartDom = document.getElementById("main"); let myChart = echarts.init(chartDom); let option; const that = this; //重点注册 $.get(senor, function (svg) { // 向 echarts 注册 SVG 字符串或解析过的 SVG DOM echarts.registerMap("senor", { svg: svg }); option = { //自己配置相应信息,查考官网 }; myChart.setOption(option); }); },
2.2 根据左坐标信息,去渲染svg
//官网参考代码
option = {
tooltip: {},
geo: {
tooltip: {
show: true
},
map: 'iceland_svg',
roam: true
},
series: {
type: 'custom',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 1,
//坐标点位
data: [
[488.2358421078053, 459.70913833075736, ],
[770.3415644319939, 757.9672194986475,],
[1180.0329284196291, 743.6141808346214, ],
[894.03790632245, 1188.1985153835008, ],
[1372.98925630313, 477.3839988649537,],
[1378.62251255796, 935.6708486282843,]
],
// 渲染部分
renderItem(params, api) {}}
}
};
但是我们需要动态去接受坐标,从而去渲染svg,故需在data中定义一个数组,去动态接受,完整代码如下:
<template>
<div id="main"></div>
</template>
<script>
import { getHolePosition, } from "@/api/visualization";
import $ from 'jquery';
import * as echarts from 'echarts';
import senor from "@/assets/images/holeSenor.svg";
export default {
data() {
return {
dataRef: [] // 用于存储孔位信息的数组
};
},
methods: {
getmap() {
getHolePosition().then((res) => {
this.dataRef = res.data
this.$nextTick(() => {
this.createECharts();
})
});
},
createECharts() {
let chartDom = document.getElementById("main");
let myChart = echarts.init(chartDom);
let option;
const that = this;
$.get(senor, function (svg) {
// 首先向 echarts 注册 SVG 字符串或解析过的 SVG DOM
echarts.registerMap("senor", { svg: svg });
option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
let formattedText =
'<b>X:</b> ' + params.value[0] +
'<b>,</b> ' +
'<b>Y:</b> ' + params.value[1] +
'<br>' +
'<b>设备名称:</b> ' + params.value[2];
return formattedText;
}
},
geo: {
tooltip: {
show: true
},
map: 'senor',
roam: true,
},
series: {
type: 'custom',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 1,
encode: {
tooltip: [0, 1, 2]
},
data: that.dataRef,
renderItem(params, api) {
const coord = api.coord([
api.value(0, params.dataIndex) / 100,
api.value(1, params.dataIndex) / 100
]);
const circles = [];
for (let i = 0; i < 5; i++) {
circles.push({
type: 'circle',
shape: {
cx: 0,
cy: 0,
r: 30
},
style: {
stroke: 'red',
fill: 'none',
lineWidth: 2
},
// Ripple animation
keyframeAnimation: {
duration: 4000,
loop: true,
delay: (-i / 4) * 4000,
keyframes: [
{
percent: 0,
scaleX: 0,
scaleY: 0,
style: {
opacity: 1
}
},
{
percent: 1,
scaleX: 1,
scaleY: 0.4,
style: {
opacity: 0
}
}
]
}
});
}
return {
type: 'group',
x: coord[0],
y: coord[1],
children: [
...circles,
{
type: 'path',
shape: {
d: 'M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z',
x: -10,
y: -35,
width: 20,
height: 40
},
style: {
fill: 'red'
},
// Jump animation.
keyframeAnimation: {
duration: 1000,
loop: true,
delay: Math.random() * 1000,
keyframes: [
{
y: -10,
percent: 0.5,
easing: 'cubicOut'
},
{
y: 0,
percent: 1,
easing: 'bounceOut'
}
]
}
}
]
};
}
},
};
myChart.setOption(option);
});
},
},
mounted() {
this.getmap();
}
};
</script>
<style scoped>
#main {
position: absolute;
top: 17%;
left: 15%;
width: 70%;
height: 70%;
background-color: rgba(0, 0, 0, 0);
}
</style>
这里有个容易错误的地方,函数层级嵌套太多,this指向可能会出现问题 ,故在这个函数里用that接受了this,再使用this.什么时,就替换成that.,即可