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】
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
######
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
- How to read text from TXT document, write it into excel and run it in reverse?
- Calculation of joint torque of detal manipulator
- Give a string representing the date and ask what day of the year it is
- [Vue] setting @ media to query font size is not effective
- How to use the ecarts national map to the city? I CV changed other people's codes and key values. Now this is the case
- Hbuilderx
- Design database (agricultural products sales database, clothing sales database and stamen sales database)
- Let's see if the course sequence of distributed architect is correct
- What's the matter with me? Please answer
- Link failure of distributed task scheduling
guess what you like
-
The bean tag calls auto assembly and has been given a parameterless construction Setget, why is class still null
-
"The column vectors of a matrix whose determinant is equal to zero may not be linearly correlated"
-
PTA 7-1 string sorting (10 points)
-
Output the full arrangement of all 1 2 3 4 5 in dictionary order
-
How to create SQL trigger
-
Stm32tftlcd displays Chinese character scrolling
-
The format of the command in the CMD window is unclear
-
What does the class name in the class mean? It's not a variable or a member function
-
Seems to have started a program called [com,.] Process. But failed to stop it, which is likely to cause a memory leak. Stack trace for Thread:
-
Object oriented programming questions
Random recommended
- What are the impossible out of stack sequences when a certain in stack sequence is CADB?
- How to do this!
- Given a matrix of N x n, find the matrix after 90 degrees of rotation
- Mac Pro M1 chip 13 inch how to delete non store software?
- Is there any student to answer the single linked list in the data structure
- On the problem of incomplete display of Vue multi selection box data
- About the problem of incomplete data acquisition in Vue's select multiple selection box
- 360 fast travel assistant how to delete
- What are the experimental equipment and requirements of C language experiment report
- Why do the left and right shifts of bit operations correspond to decimal multiplication and division
- C language will not be painful, seek solutions
- Trigger implementation inserts some fields of one table into another table
- A sine wave is known, with peak to peak value of 1V and frequency of 10kHz; Now it is necessary to obtain a sine wave with three times the frequency of the sine wave and a peak to peak value of 9V. Circuit diagram and parameter calculation process
- I want to ask whether this SQL statement is correct and can you get data? This error is displayed
- Using function to store and read text file test TXT
- I have encountered several array problems in C + +. I hope the big God can solve the puzzle. It's best to have comments
- Why does WindowBuilder keep making mistakes when running on eclipse
- What if there are only 5 plug-ins in QGIS