自己先是用链接打开了svg图片,但是导入到echarts的案例代码中,就显示有问题了
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-lines
-->
<!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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
var ROOT_PATH =
'https://cdn.jsdelivr.net/gh/LAIIII';
$.get(
ROOT_PATH + '/svg2@1.0/svg%20(11).svg',
function (svg) {
echarts.registerMap('MacOdrum-LV5-floorplan-web', { svg: svg });
option = {
title: {
text: 'Visit Route',
left: 'center',
bottom: 10
},
tooltip: {},
geo: {
map: 'MacOdrum-LV5-floorplan-web',
roam: true,
emphasis: {
itemStyle: {
color: undefined
},
label: {
show: false
}
}
},
series: [
{
name: 'Route',
type: 'lines',
coordinateSystem: 'geo',
geoIndex: 0,
emphasis: {
label: {
show: false
}
},
polyline: true,
lineStyle: {
color: '#c46e54',
width: 5,
opacity: 1,
type: 'dotted'
},
effect: {
show: true,
period: 8,
color: '#a10000',
constantSpeed: 80,
trailLength: 0,
symbolSize: [20, 12],
symbol:
'path://M35.5 40.5c0-22.16 17.84-40 40-40s40 17.84 40 40c0 1.6939-.1042 3.3626-.3067 5H35.8067c-.2025-1.6374-.3067-3.3061-.3067-5zm90.9621-2.6663c-.62-1.4856-.9621-3.1182-.9621-4.8337 0-6.925 5.575-12.5 12.5-12.5s12.5 5.575 12.5 12.5a12.685 12.685 0 0 1-.1529 1.9691l.9537.5506-15.6454 27.0986-.1554-.0897V65.5h-28.7285c-7.318 9.1548-18.587 15-31.2715 15s-23.9535-5.8452-31.2715-15H15.5v-2.8059l-.0937.0437-8.8727-19.0274C2.912 41.5258.5 37.5549.5 33c0-6.925 5.575-12.5 12.5-12.5S25.5 26.075 25.5 33c0 .9035-.0949 1.784-.2753 2.6321L29.8262 45.5h92.2098z'
},
data: [
{
coords: [
[110.6189462165178, 456.64349563895087],
[124.10988522879458, 450.8570048730469],
[123.9272226116071, 389.9520693708147],
[61.58708083147317, 386.87942320312504],
[61.58708083147317, 72.8954315876116],
[258.29514854771196, 72.8954315876116],
[260.75457021484374, 336.8559607533482],
[280.5277985253906, 410.2406672084263],
[275.948185765904, 528.0254369698661],
[111.06907909458701, 552.795792593471],
[118.87138231445309, 701.365737015904],
[221.36468155133926, 758.7870354617745],
[307.86195445452006, 742.164737297712],
[366.8489324762834, 560.9895157073103],
[492.8750778390066, 560.9895157073103],
[492.8750778390066, 827.9639780566406],
[294.9255269587053, 827.9639780566406],
[282.79803391043527, 868.2476088113839]
]
}
]
}
]
};
myChart.setOption(option);
}
);
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
希望有人能指导下,本人刚接触可视化,急需指导,不甚感激。
通过站点发布出去,或者通过其他方式起个服务即可
不好意思搞错了,你观测这个地方
你再去观测其他的,这个地方的那个值不是随便填写的,你的svg里面应该需要有那个属性,具体docname是干什么的我也不懂,以我的感觉应该是你的svg里面缺少这个属性导致的,其他的带有svg的地图,里面基本上那几个值都是对应的,至少是包含关系,我觉得跟这个有关,但我不确定,你自己想办法能修改svg试试
请问官方示例中data中的coords坐标和图中是什么对应关系呢