前言
原创作者是
前端技术之SVG图片（图标）创建_海里的鱼2022的博客-CSDN博客_svg图片
其中代码块皆来自于echarts里面的航班选座。
SVG基本形状
- 矩形 <rect>
<rect fill="#ccc" x="10" y="10" width="1010" height="560 " stroke="black" rx="10" ry="10" stroke-width="4" /> - 圆形 <circle>
<circle fill="#cccccc" stroke="#000000" cx="87.300003" cy="264.89999" r="7.5999999" id="circle20034" /> - 椭圆 <ellipse>
<ellipse fill="none" stroke="#000000" cx="21.5" cy="355.89999" rx="4.3000002" ry="6.9000001" id="ellipse20014" /> - 线 <line>
<line fill="none" stroke="#000000" x1="25.799999" y1="355.89999" x2="36.099998" y2="355.89999" id="line20016" /> - 折线 <polyline>
<polyline fill="none" stroke="#000000" points="331,390.2 331,356.3 347.2,328.3 347.2,310.6 347.2,292.9 331,264.9 331,231 " id="polyline22066" /> - 多边形 <polygon>
<polygon fill="none" stroke="#000000" points="347.2,292.9 331,264.9 331,231 194.7,231 194.7,264.9 210.8,292.9 210.8,310.6 210.8,328.3 194.7,356.3 194.7,390.2 331,390.2 331,356.3 347.2,328.3 347.2,310.6 " id="polygon22070" /> - 路径 <path>
<path fill="#cccccc" stroke="#000000" d="m 412.6,250.9 h -11.9 c -1.7,0 -3.1,1.4 -3.1,3.1 v 8.9 c 0,1.7 1.4,3.1 3.1,3.1 h 11.9 c 1.7,0 3.1,-1.4 3.1,-3.1 V 254 c -0.1,-1.7 -1.4,-3.1 -3.1,-3.1 z" id="path20070" />
路径path,最为强大
命令字包括：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
注：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
个人示例
基与echarts修改之后的选座功能
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" enable-background="new 0 0 1100.9 432" xml:space="preserve" id="svg22907" sodipodi:docname="flight-seats.svg" inkscape:version="1.0.2 (e86c8708, 2021-01-15)">
<metadata id="metadata22913">
<RDF>
<Work rdf:about="">
<format>
image/svg+xml
</format>
<type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</Work>
</RDF>
</metadata>
<defs id="defs22911" />
<namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1757" inkscape:window-height="1075" id="namedview22909" showgrid="false" inkscape:zoom="2.8207371" inkscape:cx="316.7151" inkscape:cy="1737.9541" inkscape:window-x="0" inkscape:window-y="23" inkscape:window-maximized="0" inkscape:current-layer="body" inkscape:document-rotation="0" />
<g transform="translate(0,2000) rotate(-90)" id="g22905">
<g id="body">
<!-- 主体边框 -->
<!-- <path fill="#ffffff" stroke="#000000" d="m 1092.9,310.4 c 0,44.1 -53.8,79.8 -120.3,79.8 H 64 v 0 c -13.6,-0.6 -52.3,-8.7 -56.4,-12.7 0,-9 0,-67.1 0,-67.1 0,0 0,-58.1 0,-67.1 4,-4 47.1,-12.3 56.4,-12.3 h 908.5 c 66.6,0 120.4,35.5 120.4,79.4 z" id="path19649" />这是飞机的边框 -->
<!-- <path fill="#ffffff" stroke="#000000" d="m 1092.9,310.4 c 0,44.1 0,40 0,79.4 H 64 v 0 c -13.6,-0.6 -52.3,-8.7 -56.4,-12.7 0,-9 0,-67.1 0,-67.1 0,0 0,-58.1 0,-67.1 4,-4 47.1,-12.3 56.4,-12.3 h 908.5 c 66.6,160 0,80 0,79.4 z" id="path19649" /> -->
<!-- 自制的矩形边框-->
<rect fill="#ccc" x="10" y="10" width="1010" height="560 " stroke="black" rx="10" ry="10" stroke-width="4" />
<!--小矩形盒子-->
<g id="g1">
<g name="1A1" id="g1-1">
<rect x="20" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A2" id="g1-2">
<rect x="70" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A3" id="g1-3">
<rect x="120" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A4" id="g1-4">
<rect x="170" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A5" id="g1-5">
<rect x="220" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A6" id="g1-6">
<rect x="270" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A7" id="g1-7">
<rect x="320" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A8" id="g1-8">
<rect x="370" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A9" id="g1-9">
<rect x="420" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A10" id="g1-10">
<rect x="470" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A11" id="g1-11">
<rect x="520" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A12" id="g1-12">
<rect x="570" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A13" id="g1-13">
<rect x="620" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A14" id="g1-14">
<rect x="670" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A15" id="g1-15">
<rect x="720" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A16" id="g1-16">
<rect x="770" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A17" id="g1-17">
<rect x="820" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A18" id="g1-18">
<rect x="870" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A19" id="g1-19">
<rect x="920" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="1A20" id="g1-20">
<rect x="970" y="20" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
</g>
<g id="g2">
<g name="2A1" id="g2-1">
<rect x="20" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A2" id="g2-2">
<rect x="70" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A3" id="g2-3">
<rect x="120" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A4" id="g2-4">
<rect x="170" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A5" id="g2-5">
<rect x="220" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A6" id="g2-6">
<rect x="270" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A7" id="g2-7">
<rect x="320" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A8" id="g2-8">
<rect x="370" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A9" id="g2-9">
<rect x="420" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A10" id="g2-10">
<rect x="470" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A11" id="g2-11">
<rect x="520" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A12" id="g2-12">
<rect x="570" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A13" id="g2-13">
<rect x="620" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A14" id="g2-14">
<rect x="670" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A15" id="g2-15">
<rect x="720" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A16" id="g2-16">
<rect x="770" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A17" id="g2-17">
<rect x="820" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A18" id="g2-18">
<rect x="870" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A19" id="g2-19">
<rect x="920" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="2A20" id="g2-20">
<rect x="970" y="70" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
</g>
<g id="g3">
<g name="3A1" id="g3-1">
<rect x="20" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A2" id="g3-2">
<rect x="70" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A3" id="g3-3">
<rect x="120" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A4" id="g3-4">
<rect x="170" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A5" id="g3-5">
<rect x="220" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A6" id="g3-6">
<rect x="270" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A7" id="g3-7">
<rect x="320" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A8" id="g3-8">
<rect x="370" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A9" id="g3-9">
<rect x="420" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A10" id="g3-10">
<rect x="470" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A11" id="g3-11">
<rect x="520" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A12" id="g3-12">
<rect x="570" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A13" id="g3-13">
<rect x="620" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A14" id="g3-14">
<rect x="670" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A15" id="g3-15">
<rect x="720" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A16" id="g3-16">
<rect x="770" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A17" id="g3-17">
<rect x="820" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A18" id="g3-18">
<rect x="870" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A19" id="g3-19">
<rect x="920" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="3A20" id="g3-20">
<rect x="970" y="120" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
</g>
<g id="g4">
<g name="4A1" id="g4-1">
<rect x="20" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A2" id="g4-2">
<rect x="70" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A3" id="g4-3">
<rect x="120" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A4" id="g4-4">
<rect x="170" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A5" id="g4-5">
<rect x="220" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A6" id="g4-6">
<rect x="270" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A7" id="g4-7">
<rect x="320" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A8" id="g4-8">
<rect x="370" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A9" id="g4-9">
<rect x="420" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A10" id="g4-10">
<rect x="470" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A11" id="g4-11">
<rect x="520" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A12" id="g4-12">
<rect x="570" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A13" id="g4-13">
<rect x="620" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A14" id="g4-14">
<rect x="670" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A15" id="g4-15">
<rect x="720" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A16" id="g4-16">
<rect x="770" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A17" id="g4-17">
<rect x="820" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A18" id="g4-18">
<rect x="870" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A19" id="g4-19">
<rect x="920" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="4A20" id="g4-20">
<rect x="970" y="170" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
</g>
<g id="g5">
<g name="5A1" id="g5-1">
<rect x="20" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A2" id="g5-2">
<rect x="70" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A3" id="g5-3">
<rect x="120" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A4" id="g5-4">
<rect x="170" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A5" id="g5-5">
<rect x="220" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A6" id="g5-6">
<rect x="270" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A7" id="g5-7">
<rect x="320" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A8" id="g5-8">
<rect x="370" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A9" id="g5-9">
<rect x="420" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A10" id="g5-10">
<rect x="470" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A11" id="g5-11">
<rect x="520" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A12" id="g5-12">
<rect x="570" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A13" id="g5-13">
<rect x="620" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A14" id="g5-14">
<rect x="670" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A15" id="g5-15">
<rect x="720" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A16" id="g5-16">
<rect x="770" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A17" id="g5-17">
<rect x="820" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A18" id="g5-18">
<rect x="870" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A19" id="g5-19">
<rect x="920" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="5A20" id="g5-20">
<rect x="970" y="220" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
</g>
<g id="g6">
<g name="6A1" id="g6-1">
<rect x="20" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A2" id="g6-2">
<rect x="70" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A3" id="g6-3">
<rect x="120" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A4" id="g6-4">
<rect x="170" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A5" id="g6-5">
<rect x="220" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A6" id="g6-6">
<rect x="270" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A7" id="g6-7">
<rect x="320" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A8" id="g6-8">
<rect x="370" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A9" id="g6-9">
<rect x="420" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A10" id="g6-10">
<rect x="470" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A11" id="g6-11">
<rect x="520" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A12" id="g6-12">
<rect x="570" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A13" id="g6-13">
<rect x="620" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A14" id="g6-14">
<rect x="670" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A15" id="g6-15">
<rect x="720" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A16" id="g6-16">
<rect x="770" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A17" id="g6-17">
<rect x="820" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A18" id="g6-18">
<rect x="870" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A19" id="g6-19">
<rect x="920" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
<g name="6A20" id="g6-20">
<rect x="970" y="270" rx="10" ry="10" width="40" height="40" stroke="black" fill="transparent" stroke-width="1" />
</g>
</g>
</g>
</g>
</svg>
<g id="Text">
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="-10" y="-60">
1列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="60" y="-60">
2列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="130" y="-60">
3列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="200" y="-60">
4列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="270" y="-60">
5列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="340" y="-60">
6列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="410" y="-60">
7列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="480" y="-60">
8列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="550" y="-60">
9列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="620" y="-60">
10列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="-10" y="-470">
1列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="60" y="-470">
2列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="130" y="-470">
3列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="200" y="-470">
4列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="270" y="-470">
5列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="340" y="-470">
6列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="410" y="-470">
7列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="480" y="-470">
8列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="550" y="-470">
9列
</text>
<text transform="rotate(90)" font-family="Arial" font-size="20px" id="text22777" x="620" y="-470">
10列
</text>
</g>基于VUE3的代码块
export default defineComponent({
name: 'locationEchart',
components: {},
setup() {
const state = reactive({
GetDataList: [],
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,
},
},
select: {
itemStyle: {
color: '#bf0e08',
},
},
})
}
return regions
},
getLocationcontainerList(params) {
getLocationcontainerList(params).then(res => {
if (res.code == 200) {
state.GetDataList = res.data.records
}
})
},
})
onBeforeMount(async () => {
await state.getLocationcontainerList()
})
const change = () => {
const chartBox = echarts.init(document.getElementById('mianecharts')) // 主要
var option
$.get('../src/assets/seat.svg', function(svg) {
echarts.registerMap('flight-seats', { svg: svg })
const takenSeatNames = ['1A4', '2A15']
option = {
tooltip: {}
},
geo: {
map: 'flight-seats',
roam: true, //放大缩小
selectedMode: 'multiple', // 选择
tooltip: {
show: true,
formatter: function(data) {
let htmlStr = ''
htmlStr +=
'<div>' +
'<span style="margin-right:5px; display:inline-block;width:6px;height:6px;border-radius:5px;background-color: #ccc;"></span>' +
data.name +
'</div><div>'
let items = {}
state.GetDataList.forEach((item, index) => {
if (!(state.GetDataList.length - index !== 1)) {
items = item
}
})
htmlStr +=
'<span style="margin-right:5px; display:inline-block;width:6px;height:6px;border-radius:5px;background-color: #ccc;"></span>' +
`货位编码: ${items.locationnumber}</div>` +
'<div>' +
'<span style="margin-right:5px; display:inline-block;width:6px;height:6px;border-radius:5px;background-color: #ccc;"></span>' +
`容器编码: ${items.containercode}</div>` +
'<div>' +
'<span style="margin-right:5px; display:inline-block;width:6px;height:6px;border-radius:5px;background-color: #ccc;"></span>' +
`库存数量: ${items.totalqty}</div>` +
'<div>' +
'<span style="margin-right:5px; display:inline-block;width:6px;height:6px;border-radius:5px;background-color: #ccc;"></span>' +
`区域: ${items.zonename}</div>`
return htmlStr
},
},
itemStyle: {
color: '#fff',
},
emphasis: {
itemStyle: {
color: undefined,
borderColor: 'green',
borderWidth: 2,
},
label: {
show: false,
},
},
select: {
itemStyle: {
color: 'green',
},
label: {
show: false,
textBorderColor: '#fff',
textBorderWidth: 2,
},
},
regions: state.makeTakenRegions(takenSeatNames),
},
}
chartBox.setOption(option)
chartBox.on('geoselectchanged', function(params) {
const selectedNames = params.allSelected[0].name.slice()
console.log('selected', selectedNames)
})
})
}
onMounted(() => {
change()
})
return { change, state }
},
})
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
