current position：Home>Use the geo path map in echorts to operate, but import your own SVG and it will not be displayed

Use the geo path map in echorts to operate, but import your own SVG and it will not be displayed

2022-02-02 12:32:35 【CSDN Q & A】

img

I first opened it with a link svg picture , But import into echarts In the case code of , It shows that there is a problem

img


######
Here is the source code 

<!-- 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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/dist/ecStat.min.js"></script> --> <!-- Uncomment this line if you want to use map <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/map/js/china.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]{ 
    { 
    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 + '/[email protected]/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>

I hope someone can guide , I just came into contact with you , Urgent guidance , Not very grateful .



Refer to the answer 1：

Publish through the site , Or start a service in other ways



Refer to the answer 2：

copyright notice
author[CSDN Q & A],Please bring the original link to reprint, thank you.
https://en.primo.wiki/2022/02/202202021232331545.html

The sidebar is recommended

guess what you like

Random recommended