https://echarts.apache.org/examples/zh/editor.html?c=geo-seatmap-flight 官方实例地址，按照官方实引用自己svg文件，没有交互效果，没有高亮效果，调试了大半天发现，是因为我生成的svg文件的元素里没有
name值，你妹的。
官方代码没怎么变，修改了svg文件地址
先上代码：
index.html:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="http://www.cipm-expo.com/static/js/plugs/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
var ROOT_PATH = ''
$.get(ROOT_PATH + './demo.svg', function (svg) {
echarts.registerMap('seats', { svg: svg });
const takenSeatNames = ['svg_2'];
option = {
geo: {
map: 'seats',
roam: true,
selectedMode: 'multiple',
layoutCenter: ['50%', '50%'],
layoutSize: '50%',
itemStyle: {
color: '#fff'
},
emphasis: {
itemStyle: {
color: undefined,
borderColor: 'green',
borderWidth: 2
},
label: {
show: true
}
},
select: {
itemStyle: {
color: 'green'
},
label: {
show: true,
textBorderColor: '#fff',
textBorderWidth: 2
}
},
regions: makeTakenRegions(takenSeatNames)
},
};
function makeTakenRegions(takenSeatNames) {
var regions = [];
for (var i = 0; i < takenSeatNames.length; i++) {
regions.push({
name: takenSeatNames[i],
silent: true,
itemStyle: {
color: '#bf0e08'
},
emphasis: {
itemStyle: {
borderColor: '#aaa',
borderWidth: 1
},
label: {
show: false
}
},
select: {
itemStyle: {
color: '#bf0e08'
},
label: {
show: false
}
}
});
}
console.log('regions', regions)
return regions;
}
myChart.setOption(option);
myChart.on('geoselectchanged', function (params) {
const selectedNames = params.allSelected[0].name.slice();
// Remove taken seats.
for (var i = selectedNames.length - 1; i >= 0; i--) {
if (takenSeatNames.indexOf(selectedNames[i]) >= 0) {
selectedNames.splice(i, 1);
}
}
console.log('selected', selectedNames);
});
if (option && typeof option === 'object') {
myChart.setOption(option);
}
});
</script>
</body>
</html>
demo.svg:
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<rect fill="#000" stroke="#fff" x="78" y="86" width="160" height="142" id="svg_1" name="svg_1"/>
<rect fill="#000" stroke="#fff" x="318" y="87" width="182" height="149" id="svg_2" name="svg_2"/>
<rect fill="#000" stroke="#fff" x="588" y="91" width="158" height="191" id="svg_3" name="svg_3"/>
<rect fill="#000" stroke="#fff" x="167" y="287" width="398" height="170" id="svg_4" name="svg_4"/>
</g>
</svg>
目前测试到的，echarts操作svg文件主要使用的是
name属性，至于什么标签无所谓，
效果:
1640659015(1).jpg
我项目中准备集成的是 # Method-Draw svg编辑器，对于颜值控的人来说，盘靓条顺，功能也不错。当然，这个name值也是因为用她生成的原因，默认不带name属性
image.png
解决:
svgcanvas.js 主要在这个文件中修改
因为我项目中只用到rect和image标签，并且image不需要有交互效果，所以，偷懒只在这个文件中的，mouseDown 方法中的 rect下添加了name值，并且值为id
image.png
后期优化思路，会在创建元素之后右侧添加一个是否添加name的功能选项，并且支持自定义的name前缀
网友评论