前提
最近在做项目中遇见下面需求，每个区域两两之间都需要连线，点击某区域则显示为以某区域为中心向其他城市的连线，如果城市之间没有告警则线为绿色，有告警则显示为红色。
初始考虑使用切图方案，每条线单独切两个状态。即每个区域都需要切图7×2 =14张。一共8个区域，就是14×8=112张切图，对于设计人员来说工作量巨大，开发人员也需要大量的时间来对应图片和数据。故采用svg实现上述效果。
思路
- 让设计出8张svg的图片，每个区域为中心向其他城市发散的效果为一张。
- svg中的每条线都可以单独控制颜色，用来对接数据改变颜色。
- 实现小球在路径上做循环动画运动。
demo
小球沿着路径运动demo代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>圆点移动-示例</title>
</head>
<style>
#svg2 {
position: absolute;
left: 110px;
top: 110px;
}
.st0 {
fill: none;
stroke: #000000;
stroke-linecap: round;
stroke-linejoin: round;
}
</style>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<path id="motionPath" d="M100,100 C200,200 300,0 400,100" fill="none" stroke="green" />
<circle cx="0" cy="0" r="5" fill="green">
<animateMotion dur="4s" repeatCount="indefinite" begin="1s" rotate="auto">
<mpath href="#motionPath" />
</animateMotion>
</circle>
<circle cx="0" cy="0" r="5" fill="green">
<animateMotion dur="4s" repeatCount="indefinite" begin="2s">
<mpath href="#motionPath" />
</animateMotion>
</circle>
<circle cx="0" cy="0" r="5" fill="green">
<animateMotion dur="4s" repeatCount="indefinite" begin="3s">
<mpath href="#motionPath" />
</animateMotion>
</circle>
<circle cx="0" cy="0" r="5" fill="green">
<animateMotion dur="4s" repeatCount="indefinite" begin="4s">
<mpath href="#motionPath" />
</animateMotion>
</circle>
<!-- 添加更多的圆点元素 -->
</svg>
</body>
</html>
demo效果：
实现
由于我是用jsx语法编程，所以语法最终为下面这样(省略了部分无关业务代码及css样式)：
return class item extends Base {
constructor(dom, config) {
super(dom, config);
this.lineObj = {
"亦庄": [
{
"path": "M4355.78,757.04 4224.81,763.5 4091.43,760.17 3959.49,751.15 3830.19,738.11 3703.53,722.03 3579.81,703.61 3458.68,683.24 3340.1,661.31 3223.49,638.28 3104.39,617.47 2981.85,599.8 2856.5,585.12 2729.08,573.34 2600.15,564.28 2470.02,557.76 2339.19,553.62 2207.95,551.77 2076.49,552.03 1945.04,554.37 1813.84,558.73 1683.07,565.17 1553.35,574.11",
"num": 8,
"to": "呼和浩特"
},
{
"path": "M4409.22,723.2 4364.34,718.24 4319.98,712.59 4276.19,706.35 4233.16,699.51 4190.98,692.02 4149.91,683.79 4110.32,674.69 4072.68,664.62 4037.83,653.36 4006.97,640.76 3981.97,626.74",
"num": 2,
"to": "硅谷"
},
{
"path": "M4302.6,824.25 4260.77,814.74 4217.32,806.29 4172.7,798.76 4127.15,792.12 4080.75,786.39 4033.69,781.62 3986.03,777.87 3937.93,775.17 3889.56,773.57 3841.13,773.11 3792.79,773.81 3744.5,774.97 3696.09,775.17 3647.65,774.38 3599.34,772.62 3551.33,769.94 3503.78,766.35 3456.8,761.85 3410.51,756.5 3365.08,750.26 3320.7,743.14 3277.94,734.95",
"num": 3,
"to": "西红门"
},
{
"path": "M4291.32,848.99 4140.87,822.91 3978.26,811.8 3814.19,814.66 3656.03,829.8 3507.76,854.74 2514.74,1178.34 2374.95,1214.43 2230.47,1248.43 2081.78,1280.39 1929.29,1310.33 1773.46,1338.27 1614.47,1364.22 1452.72,1388.1 1288.35,1409.76 1121.68,1428.55",
"num": 12,
"to": "西安"
},
{
"path": "M4940.64,909.77 4908.33,946.38 4885.73,982.28 4870.01,1017.46 4860.08,1051.83 4855.19,1085.37 4854.81,1118.18 4858.52,1150.25 4865.97,1181.59 4876.81,1212.16 4890.85,1242.1 4907.83,1271.38 4927.52,1300.01 4948.39,1328.69 4968.93,1358.15 4989.07,1388.41 5008.77,1419.64 5027.86,1451.96 5046.23,1485.61 5063.62,1520.89 5079.63,1558.3 5093.47,1598.83 5102.15,1645.8",
"num": 4,
"to": "无锡"
},
{
"path": "M4442.72,937.08 4429.44,941.15 4416.12,945.25 4402.8,949.37 4389.48,953.46 4376.14,957.56 4362.8,961.68 4349.44,965.78 4336.1,969.89 4322.72,974.01 4309.34,978.13 4296,982.24",
"num": 1,
"to": "廊坊"
},
{
"path": "M4719.62,954.84 4731.16,976.75 4738.39,998.95 4741.92,1021.23 4741.86,1043.59 4738.1,1065.91 4730.52,1088.07 4718.93,1110.01 4703.19,1131.6 4683.17,1152.71 4658.79,1173.17 4630.08,1192.87 4597.79,1211.84 4566.37,1231.09 4536.5,1250.77 4508.14,1270.84 4481.24,1291.29 4455.75,1312.08 4431.68,1333.21 4408.98,1354.63 4387.64,1376.35 4367.67,1398.35 4349.04,1420.61 4331.8,1443.14 4315.98,1465.9 4301.57,1488.9 4288.66,1512.13 4277.25,1535.58 4267.49,1559.23 4259.4,1583.09 4253.14,1607.14 4248.17,1631.29 4243.41,1655.58 4238.63,1679.95 4233.6,1704.41 4228.26,1728.92 4222.48,1753.5 4216.21,1778.13 4209.33,1802.83 4201.84,1827.58 4193.65,1852.35 4184.71,1877.17 4175,1902.03 4164.42,1926.92 4153,1951.81 4140.61,1976.71 4127.27,2001.62 4112.88,2026.52 4097.42,2051.38 4080.81,2076.22 4063.04,2101 4044.03,2125.71 4023.72,2150.35 4002.07,2174.87 3979,2199.27 3954.48,2223.52 3928.47,2247.6 3900.86,2271.48 3870.77,2294.93 3837.39,2317.76 3801.19,2339.92 3762.4,2361.49 3721.43,2382.45 3678.43,2402.87 3633.69,2422.73 3587.33,2442.1 3539.56,2460.99 3490.46,2479.42 3440.19,2497.42 3388.83,2515 3336.46,2532.19 3283.15,2549.02 3229,2565.46 3173.99,2581.58 3118.27,2597.34 3061.76,2612.78 3004.57,2627.89 2946.81,2642.65 2888.29,2657.11 2829.14,2671.24 2769.38,2685 2709.08,2698.36 2647.79,2711.34 2585.9,2723.66 2522.79,2734.33",
"num": 14,
"to": "广州"
}
],
"硅谷": [
{
"path": "M3237,437.1 3116.9,428.8 2892.7,422 2665.1,425.1 2538.5,431.4 2405.7,441.6 2208.5,464.3 2008.1,496.5 1802.3,539.5 1633.8,583.2 1566.6,603.7 ",
"num": 8,
"to": "呼和浩特"
},
{
"path": "M3884.3,589.9 3911,607.6 3943.9,623.4 3981.1,637.6 4021.2,650.3 4063.4,661.7 4107.2,672.1 4152.1,681.5 4198,690.1 4244.6,698 4291.9,705.1 4339.7,711.4",
"num": 2,
"to": "亦庄"
},
{
"path": "M3488,597.7 3485.9,601.2 3479.7,609.1 3470.3,618.2 3456.4,629.1 3437,641.2 3417.1,651.3 3392.9,661.4 3363.9,671.4 3329.7,680.7 3300.5,687.2 3268,693.1 ",
"num": 1,
"to": "西红门"
},
{
"path": "M3248.6,499.2 3081.2,497.6 2867.8,502.7 2674.7,515 2533.7,530.2 2424.2,547 2346.3,562.7 2273.6,581.4 2228.7,595.7 2187.2,611.4 2127.5,639.1 2077.6,667.9 2036.4,697.7 2002.8,728.3 1967.6,770.4 1930.3,835.4 1833,1048.2 1796.7,1092.4 1774.2,1114.2 1733.9,1146.5 1670.7,1186.7 1599.3,1223.7 1502.2,1265.3 1380.4,1308.2 1241.5,1348.8 1088.5,1385.7 1005.8,1402.6 969,1409.3 ",
"num": 12,
"to": "西安"
},
{
"path": "M3645.6,613.7 3584.2,694.7 3501,848.3 3457.8,991.9 3450,1120.2 3467.4,1221 3510.5,1323.4 3556.2,1391.3 3617.2,1458.2 3695.2,1523.3 3791.7,1585.9 3908.4,1645.1 4046.7,1700.2 4208.2,1750.5 4394.5,1795 4497.3,1814.8 4723.2,1849.2 ",
"num": 7,
"to": "无锡"
},
{
"path": "M3715.3,610.7 3806,749 3895.8,889.8",
"num": 2,
"to": "廊坊"
},
{
"path": "M3595.1,610.7 3594.1,611.1 3588.5,614.5 3512.7,671.8 3345.3,830.7 3187.5,1031 3062.2,1261.4 3003.2,1430.6 2967.5,1619.2 2895.6,1954.3 2774,2232.8 2627.1,2452.1 2481.6,2611 2365.2,2710 2319.6,2742.4 2303,2753 ",
"num": 14,
"to": "广州"
}
],
"廊坊": [
{
"path": "M3539.8,1022.3 3539.6,1022.3 3539.3,1022.3 3351.9,1013.6 3164.4,1004.9 2994.9,991.4 2825.5,977.9 2641.6,955.7 2457.7,933.4 2326.1,910.5 2194.6,887.6 2030.6,851.1 1866.6,814.6 1743.4,781.7 1620.3,748.7 1574.3,734.9 1528.3,721.1",
"num": 8,
"to": "呼和浩特"
},
{
"path": "M4241.6,922.4 4260.5,914.7 4279.3,907.1 4298.2,899.5 4317,891.8 4335.8,884.2 4354.6,876.6 4373.4,869 4392.2,861.4 4411,853.8 4429.7,846.2 4448.4,838.6",
"num": 2,
"to": "亦庄"
},
{
"path": "M3617.1,942.1 3561.6,924.2 3506,906.3 3450.4,888.4 3394.9,870.4 3339.4,852.5 3283.8,834.6 3228.3,816.7 3172.7,798.8",
"num": 2,
"to": "西红门"
},
{
"path": "M3560.6,1073.3 3398.6,1095.9 3236.6,1118.5 3074.6,1141.1 2912.6,1163.7 2750.6,1186.3 2588.6,1208.9 2426.6,1231.5 2264.6,1254.1 2102.6,1276.7 1940.6,1299.3 1778.6,1321.9 1616.6,1344.5 1454.6,1367.1 1292.6,1389.7 1130.6,1412.3 968.6,1434.9",
"num": 12,
"to": "西安"
},
{
"path": "M4203.1,1166.9 4286.3,1238.6 4369.5,1310.3 4452.6,1382 4535.8,1453.8 4619,1525.5 4702.1,1597.2 4785.3,1668.9 4868.5,1740.6",
"num": 5,
"to": "无锡"
},
{
"path": "M3894.4,886.5 3894.4,886.4 3894.4,886.3 3894.4,886.3 3894.4,886.2 3871.1,852.5 3847.9,818.8 3824.6,785 3801.4,751.3 3777.9,718.1 3754.4,684.9 3731,651.7 3707.5,618.5",
"num": 2,
"to": "硅谷"
},
{
"path": "M3751.4,1167.3 3659.8,1265.9 3568.3,1364.5 3476.7,1463.1 3385.1,1561.7 3293.6,1660.3 3202,1758.9 3110.4,1857.5 3018.9,1956.2 2927.3,2054.8 2835.7,2153.4 2744.1,2252 2652.6,2350.6 2561,2449.2 2469.4,2547.8 2377.9,2646.4 2286.3,2745",
"num": 14,
"to": "广州"
}
],
"广州": [
{
"path": "M2046.4,2712.4 2000.8,2592.2 1955.3,2472 1909.8,2351.8 1864.2,2231.6 1818.7,2111.4 1773.1,1991.2 1727.6,1871 1682,1750.8 1636.4,1630.5 1590.9,1510.3 1545.3,1390.1 1499.8,1269.9 1454.3,1149.7 1408.7,1029.5 1363.2,909.3 1317.6,789.1 ",
"num": 8,
"to": "呼和浩特"
},
{
"path": "M2388.6,2785.1 2455.6,2773.9 2521,2760.9 2585.7,2747.2 2649.3,2733.1 2712.4,2718.6 2774.8,2703.7 2836.6,2688.4 2897.5,2672.8 2957.9,2656.9 3017.5,2640.6 3076.3,2624 3134.4,2607 3191.5,2589.6 3247.8,2571.9 3303.1,2553.8 3357.3,2535.2 3410.3,2516.2 3462.1,2496.8 3512.6,2476.9 3561.5,2456.4 3608.7,2435.5 3654.1,2413.9 3697.3,2391.8 3738.3,2369.1 3776.5,2345.7 3811.7,2321.6 3843.5,2296.9 3872.6,2271.7 3900.1,2246.3 3925.9,2220.7 3950.3,2195 3973.1,2169.1 3994.6,2143.1 4014.6,2117.1 4033.4,2090.9 4050.9,2064.7 4067.2,2038.5 4082.4,2012.2 4096.5,1986 4109.6,1959.7 4121.6,1933.4 4132.8,1907.2 4143,1881 4152.4,1854.8 4161.1,1828.7 4169,1802.6 4176.3,1776.5 4182.9,1750.5 4189,1724.6 4194.6,1698.7 4199.9,1672.9 4205,1647.2 4210,1621.6 4215.3,1596.1 4221.9,1570.8 4230.4,1545.6 4240.7,1520.7 4252.7,1495.9 4266.4,1471.4 4281.6,1447.2 4298.3,1423.2 4316.5,1399.4 4336.1,1375.9 4357.2,1352.7 4379.7,1329.8 4403.7,1307.2 4429.1,1284.9 4456,1263 4484.4,1241.4 4514.3,1220.2 4545.8,1199.5 4579,1179.2 4613.1,1159.2 4643.4,1138.4 4669.1,1116.8 4690.2,1094.5 4706.8,1071.8 4719.1,1048.6 4727.1,1025.2 4731,1001.7 4731.1,978.1 4727.4,954.6 4719.7,931.2 4707.7,908.3",
"num": 12,
"to": "亦庄"
},
{
"path": "M2184.6,2718.3 2220.6,2602.4 2256.5,2486.4 2292.5,2370.5 2328.5,2254.6 2364.4,2138.6 2400.4,2022.7 2436.3,1906.7 2472.3,1790.8 2508.3,1674.9 2544.2,1558.9 2580.2,1443 2616.1,1327.1 2652.1,1211.1 2688.1,1095.2 2724,979.2 2760,863.3 ",
"num": 10,
"to": "西红门"
},
{
"path": "M1933.3,2727.3 1857,2653 1780.6,2578.8 1704.3,2504.5 1627.9,2430.3 1551.6,2356 1475.3,2281.7 1398.9,2207.5 1322.6,2133.2 1251.1,2062.9 1179.6,1992.6 1108,1922.3 1036.5,1852.1 965,1781.8 893.5,1711.5 821.9,1641.2 750.4,1570.9 ",
"num": 9,
"to": "西安"
},
{
"path": "M2540.9,2883.3 2541.8,2883.2 2583.4,2878.4 2773.5,2850.1 3013.5,2804.5 3236.3,2751.9 3410.7,2702.2 3583.8,2643.4 3798.3,2555 4041.2,2454.8 4227.4,2364 4395.7,2281.9 4554.9,2204.3 4683.6,2141.5 4838.7,2056.7 4961.9,1989.3 ",
"num": 10,
"to": "无锡"
},
{
"path": "M2233.1,2726.2 2275.8,2699.5 2384.9,2617.1 2531.6,2476.6 2686.9,2277 2822.6,2019.1 2885.8,1829.2 2925.2,1618.3 2984.5,1365.6 3102.1,1122.3 3264,906.2 3436.6,738.1 3554.4,647.9 3571.9,636.5 3578.8,632.7 ",
"num": 12,
"to": "硅谷"
},
{
"path": "M2347.1,2744.8 2409.1,2719.7 2532.5,2661.3 2673.8,2580.9 2805.9,2488.4 2884.8,2421 2970,2330.9 3048,2220.8 3160.5,2062.1 3254.5,1929.4 3360.2,1780.2 3468.4,1627.5 3559.9,1498.5 3659.6,1357.8 3727.6,1261.9 3786.5,1178.7",
"num": 10,
"to": "廊坊"
}
],
"呼和浩特": [
{
"path": "M1535.9,730.4 1789.9,799.2 2145.2,878.3 2285.1,904.3 2462.5,932.5 2768.4,969.1 3308.1,1008.3 3541.1,1017.2",
"num": 9,
"to": "廊坊"
},
{
"path": "M1583.4,599.9 1699.5,580.1 1820.2,563.4 1944.3,549.3 2070.7,538.1 2199.3,529.8 2329.4,524.6 2460.3,522.7 2591.1,524.4 2721,529.6 2848.9,538.5 2973.6,551 3094.5,567 3211.3,586.1 3327.9,605.3 3447.1,623.3 3568.6,640 3692.6,655 3819.4,668 3948.6,678.5 4080.2,685.5 4213,687.8 4342.8,682",
"num": 8,
"to": "亦庄"
},
{
"path": "M1583.4,659.1 1692.6,662.3 1801.8,665.5 1911,668.7 2020.2,671.8 2129.4,675 2238.6,678.2 2347.8,681.4 2457,684.6",
"num": 3,
"to": "西红门"
},
{
"path": "M1097.4,787.2 1044.7,844.7 991.9,902.2 939.2,959.7 886.4,1017.2 833.7,1074.7 780.9,1132.2 728.2,1189.7 675.4,1247.2",
"num": 3,
"to": "西安"
},
{
"path": "M1460.5,761.4 1645.2,844.9 1862.7,943.2 2079.6,1041.3 2321.7,1150.7 2599.5,1261 2876.5,1360 3138.9,1438.8 3415.2,1521.8 3856.6,1632.2 4308.5,1745.2 4747.9,1841.3",
"num": 12,
"to": "无锡"
},
{
"path": "M1535.9,557.1 1638,533.8 1832.7,497.1 2058,463.7 2216.3,445.6 2389.5,430.7 2602.7,419.5 2819.6,415.4 3036.7,418.1 3182,424 3235,427.2",
"num": 4,
"to": "硅谷"
},
{
"path": "M1303.8,785.5 1351,906.6 1398.3,1027.6 1445.5,1148.7 1492.7,1269.8 1540,1390.8 1587.2,1511.9 1634.4,1633 1681.7,1754.1 1728.9,1875.1 1776.1,1996.2 1823.3,2117.3 1870.6,2238.3 1917.8,2359.4 1965,2480.5 2012.3,2601.5 2059.5,2722.6 ",
"num": 10,
"to": "广州"
}
],
"无锡": [
{
"path": "M4928.5,1715.9 4844.4,1643 4760.2,1570.1 4676.1,1497.2 4592,1424.4 4507.8,1351.5 4423.7,1278.6 4339.5,1205.7 4255.4,1132.8 ",
"num": 3,
"to": "廊坊"
},
{
"path": "M5118.9,1696 5110.3,1655.5 5097.1,1615.3 5081.9,1575.3 5065.4,1535.6 5048.1,1496.2 5030.1,1457 5011.6,1418.1 4992.6,1379.4 4973.2,1340.8 4953.6,1302.5 4935.1,1264.4 4919.1,1226.2 4905.9,1188.1 4895.8,1150.1 4888.8,1112.2 4885.3,1074.5 4885.7,1037 4890.3,999.9 4899.6,963.2 4914.4,927.2 4935.6,892.2 4966.1,858.9 ",
"num": 4,
"to": "亦庄"
},
{
"path": "M4770.9,1784.7 4770.5,1784.5 4768.4,1783.8 4015.6,1545.5 3782.7,1455.7 3532.8,1343.4 3436,1290.6 3332.6,1222 3232.2,1138.9 3133.9,1033.6 3058.7,923.6 3028.8,863.6 3018.9,837.7 ",
"num": 6,
"to": "西红门"
},
{
"path": "M4725.2,1894.2 3658.2,1876.4 3231.6,1857.3 2761.4,1823.5 2382.4,1779.6 1861,1694.9 1193.9,1555.1 903.7,1483.5 ",
"num": 13,
"to": "西安"
},
{
"path": "M4719,1829.9 3895.6,1669.4 3328,1539.6 2769.4,1387.4 2568.7,1319.4 2253.1,1190.4 1663.9,894.8 1405,744 ",
"num": 12,
"to": "呼和浩特"
},
{
"path": "M4832.8,1748.8 4374.1,1597.2 4101.1,1487.5 3882.2,1382 3711.6,1281.2 3583.7,1185.5 3492.9,1095.4 3433.9,1011.5 3401.6,934 3391,863.6 3397.2,800.5 3423.7,728.8 3460.9,672.1 3506.4,623.9 3525.4,608.1 3532.7,602.7 ",
"num": 6,
"to": "硅谷"
},
{
"path": "M5014.7,1984.4 4298.2,2349.5 3975.6,2493.9 3584.6,2649.5 3404.9,2709.3 3194.1,2767.3 2938.4,2824.4 2682,2869.5 2557.3,2887.1 2502.2,2893.4 ",
"num": 10,
"to": "广州"
}
],
"西安": [
{
"path": "M976.8,1424.2 1219.8,1405 1462.7,1385.8 1927.7,1341.8 2392.6,1297.8 2816.9,1239.9 3241.2,1182 3441.5,1149.1 3641.8,1116.2 ",
"num": 8,
"to": "廊坊"
},
{
"path": "M954.9,1373.7 1120.7,1348 1284.8,1321.1 1447.2,1293.5 1608.2,1265.1 1767.5,1236 1925.2,1206.2 2081.3,1175.8 2235.6,1144.7 2388.2,1112.9 2538.9,1080.4 2687.5,1047.3 2834.1,1013.4 2978.6,978.8 3121.9,944.1 3269.2,912.2 3420.4,883.6 3575.8,858.5 3734.7,837.1 3897.2,819.7 4062.5,806.7 4230.4,798.6 4399.8,797.1 ",
"num": 13,
"to": "亦庄"
},
{
"path": "M908.5,1351.1 1103.7,1279.9 1299,1208.6 1494.2,1137.4 1689.4,1066.2 1884.7,994.9 2079.9,923.7 2275.2,852.4 2470.4,781.2 ",
"num": 5,
"to": "西红门"
},
{
"path": "M942,1489 1770.6,1612.1 2217.3,1666.4 2751.4,1717.8 4059.6,1794.3 4744.4,1821.1 ",
"num": 13,
"to": "无锡"
},
{
"path": "M695.1,1285.7 738.4,1221.3 781.8,1156.9 825.2,1092.5 868.5,1028.1 911.8,963.8 955.2,899.4 998.6,835 1041.9,770.6 ",
"num": 3,
"to": "呼和浩特"
},
{
"path": "M880.5,1332.5 1172.2,1193.7 1336.7,1105.3 1496.5,1007.9 1601.9,929.9 1877.6,694.4 1961.9,644 2029.8,610.1 2130.9,567.1 2173.5,551.9 2243.8,532 2320.4,515 2401.8,500.8 2515.4,485.8 2660.3,472.4 2856.4,461.8 3106.4,457.8 3220.4,459.4 ",
"num": 7,
"to": "硅谷"
},
{
"path": "M735.2,1578.2 809.1,1649.1 883,1720.1 956.9,1791 1030.8,1861.9 1104.6,1932.8 1178.5,2003.8 1252.4,2074.7 1326.3,2145.6 1405.2,2220.5 1484.1,2295.5 1562.9,2370.4 1641.8,2445.3 1720.7,2520.2 1799.6,2595.1 1878.4,2670.1 1957.3,2745 ",
"num": 8,
"to": "广州"
}
],
"西红门": [
{
"path": "M3205,789.2 3232,797.6 3258.9,805.9 3285.9,814.3 3312.9,822.7 3339.8,831 3366.8,839.4 3393.8,847.7 3420.8,856.1 3447.7,864.5 3474.7,872.8 3501.7,881.2 3528.6,889.5 3555.6,897.9 3582.6,906.3 3609.5,914.6 3636.5,923 ",
"num": 1,
"to": "廊坊"
},
{
"path": "M3248.2,704.6 3294.1,710.8 3341.6,715.8 3390.2,719.7 3439.5,722.7 3489.6,724.6 3540.3,725.6 3591.3,725.6 3642.6,724.5 3694,722.4 3745.3,719.2 3796.4,715 3847.6,711.3 3899,708.8 3950.4,707.6 4001.5,707.5 4052.3,708.7 4102.5,710.9 4152,714.3 4200.7,718.6 4248.5,724 4295.1,730.5 4340,738.2 ",
"num": 3,
"to": "亦庄"
},
{
"path": "M2526,782.5 2425.3,819.2 2324.6,855.9 2223.9,892.6 2123.2,929.3 2022.5,965.9 1921.8,1002.6 1821.1,1039.3 1720.3,1076 1619.6,1112.7 1518.9,1149.4 1418.2,1186.1 1317.5,1222.8 1216.8,1259.4 1116.1,1296.1 1015.4,1332.8 914.7,1369.5 ",
"num": 6,
"to": "西安"
},
{
"path": "M3047,842.1 3139.9,945.2 3304.3,1091.1 3448.6,1196.1 3651.8,1317.3 4377.3,1664.7 4635.6,1777.7 4744.4,1825.4 ",
"num": 6,
"to": "无锡"
},
{
"path": "M2427.7,691 2374.7,689.4 2321.6,687.8 2268.6,686.2 2215.6,684.5 2162.5,682.9 2109.5,681.3 2056.4,679.7 2003.4,678.1 1950.4,676.5 1897.3,674.9 1844.3,673.3 1791.3,671.7 1738.2,670 1685.2,668.4 1632.1,666.8 1579.1,665.2 ",
"num": 3,
"to": "呼和浩特"
},
{
"path": "M3248.2,656.2 3290.6,650 3327.2,643 3358.6,635.5 3385,627.6 3406.8,619.7 3424.6,612 3441.6,602.9 3453.5,594.9 3462.3,587.4 3465.9,583.4 3466.9,582 ",
"num": 1,
"to": "硅谷"
},
{
"path": "M2760.6,842.1 2723.6,960.7 2686.5,1079.3 2649.5,1197.9 2612.5,1316.5 2575.4,1435.1 2538.4,1553.7 2501.4,1672.3 2464.4,1790.9 2427.3,1909.5 2390.3,2028.1 2353.3,2146.7 2316.2,2265.3 2279.2,2383.9 2242.2,2502.5 2205.1,2621.1 2168.1,2739.7 ",
"num": 8,
"to": "广州"
}
]
}
}
render(h, data, opts) {
const { chart, box, text } = this.opts.menu
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5900 3200">
{
this.lineObj[this.currentArea]?.map((item, index) => {
// 筛选显示的时延数据等
let itemData = dataList?.delayList?.find(function (itemData) { return itemData.to == item.to })
return (
<g id="">
<path class={itemData?.status == 1 ? "path warn" : "path"} id={`${this.currentArea + index}`} d={item.path} fill="none" />
{
Array(item.num).fill(0)?.map((item1, index1) => {
return (
<circle cx="0" cy="0" r="15" fill="green" class={itemData?.status == 1 ? "circle warn" : "circle"}>
<animateMotion dur={`${item.num}s`} repeatCount="indefinite" begin={`${index1}s`}>
<mpath href={`#${this.currentArea + index}`} />
</animateMotion>
</circle>
)
})}
</g>
)
})
}
</svg>
)
}
