ehcarts 实现星空图 半径轴显示?-灵析社区

Daily毅星

星空图如何实现由内到外半径轴的数值大小是从90-0显示的? function SkyMap() { let MyChart = echarts.init(starChartMap.value) // 角度轴 const angleAxisData = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 360] //半径轴 const radiusAxisData = [90, 80, 70, 60, 50, 40, 30, 20, 10, 0]; // 数据 [半径轴,角度轴,显示数据] const GPSData = [[9.0000000005, 250, 50], [90, 285, 5], [50, 122, 5], [50, 175, 81], [3.0000000063, 330, 88]] const BDSData = [[60, 56, 17], [30, 310, 32], [60, 188, 76], [50, 75, 81]] const GLONASSData = [[20, 300, 53], [70, 180, 65], [90, 52, 76], [40, 133, 89], [50, 15, 81]] const GALILEOData = [[20, 20, 27], [80, 125, 152], [50, 5, 81]] let option = { // 背景色 backgroundColor: { type: 'radial', x: 0.45, y: 0.5, r: 0.5, colorStops: [{ offset: 0.8, color: '#a349a3' // 起始颜色,设置为透明色005288 }, { offset: 0, color: '#eea2ee' // 中间颜色3da5eb }, { offset: 0.8, color: '#ffffff' // 结束颜色,设置为透明色 }] }, // 图例 legend: { orient: 'vertical', left: '5%', }, polar: { center: ['45%', '50%'] }, // 提示框 tooltip: { trigger: 'axis', formatter: (params: any) => { var htmlF = ''; params.forEach((item: any, index: number) => { // 是否为第一个元素,如果不是则不显示item.axisValue(角度轴) if (index === 0) { // htmlF += `${item.axisValue}.00${item.marker}${item.seriesName} : ${item.data[0] + ',' + item.data[1] + ',' + item.data[2]}`; htmlF += `卫星信息:${item.marker}${item.seriesName} : ${item.data[0] + ',' + item.data[1] + ',' + item.data[2]}`; } else { htmlF += `${item.marker}${item.seriesName} : ${item.data[0] + ',' + item.data[1] + ',' + item.data[2]}`; } }); return htmlF; }, axisPointer: { type: 'cross' } }, // 角度轴 angleAxis: { type: 'value', data: angleAxisData, max: 360, splitLine: { show: true, lineStyle: { color: '#e4e0e0', type: 'dashed' } }, axisLabel: { color: '#575454' // 设置字体颜色为红色 } }, // 半径轴 radiusAxis: { type: 'value', data: radiusAxisData, // minInterval: 0, min: 90, max: 0, splitLine: { show: true, lineStyle: { color: '#e4e0e0' } }, axisLine: { show: false }, axisLabel: { color: '#575454' // 设置字体颜色为红色 } }, // 数据 series: [ // GPS { name: 'GPS', type: 'scatter', color: 'blue', coordinateSystem: 'polar', data: GPSData, // symbolSize: function (val: any) { // return val[0] * 0.5; // } label: { normal: { show: true, formatter: '{@value}', position: 'inside', textStyle: { color: '#ffffff', fontWeight: 'bold', fontSize: 13 } } }, symbolSize: 20 }, // BDS { name: 'BDS', type: 'scatter', color: 'red', coordinateSystem: 'polar', data: BDSData, label: { normal: { show: true, formatter: '{@value}', position: 'inside', textStyle: { color: '#ffffff', fontWeight: 'bold', fontSize: 13 } } }, symbolSize: 20 }, // GLONASS { name: 'GLONASS', type: 'scatter', color: '#e6a23c', coordinateSystem: 'polar', data: GLONASSData, label: { normal: { show: true, formatter: '{@value}', position: 'inside', textStyle: { color: '#ffffff', fontWeight: 'bold', fontSize: 13 } } }, symbolSize: 20 }, // GALILEO { name: 'GALILEO', type: 'scatter', color: '#67c23a', coordinateSystem: 'polar', data: GALILEOData, label: { normal: { show: true, formatter: '{@value}', position: 'inside', textStyle: { color: '#ffffff', fontWeight: 'bold', fontSize: 13 } } }, symbolSize: 20 }, ] }; MyChart.setOption(option); let autoHeight = 10 * 50 + 100; MyChart.getDom().style.height = autoHeight + "%"; MyChart.resize(); } ![图片.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241013/a0d630fd38c1b1c1673de8b0304f0185.png) 目前我随便怎么修改 由内到外都是从0-90的

阅读量:117

点赞量:0

问AI
Edit 可以用 "radiusAxis. inverse" (https://link.segmentfault.com/?enc=6UplO7zVWEEz2HCKtg4obQ%3D%3D.UpLnAqsBzJvhPa%2FJah6UdT%2FwXOPZNzl0soy1jH7GETfIs3suuTa%2BCKVn9GlV%2F6hQZFO8vBLAOqUAwCjkR4zTJw%3D%3D),之前找文档的时候没看到 😂 这样也不需要用自定义的 "radiusAxis.data" 值了。 "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241013/dcc23b7df6313c7d804fb606d4a1a224.png) "Examples - Apache ECharts" (https://link.segmentfault.com/?enc=FRVZO59O7LLxiZwYx8jYhg%3D%3D.mm83AAmBIRqYAqOYcmpI5T5FuiJj1Z5SI2rrQRRej4T%2FXr78QlOs5B5WbwaqJTP0kHbCZBQt%2FwyS%2FbJ6V%2FAOXZgTxyPpc%2BcpyjkFycd4IQHnOG5YQAYpgAN7fnHWId1%2BvzfLMcsH7KwpVbeO4ezsGwniCa6Xgx%2BMIzpw48qoMMWSJpayn%2Bi67t%2FKEEvaX1MFwo5O64mqx9fABxciVY0RdbP1qZZmUDtwNo8Yfpi%2Fawp6a1buNeMkTgWGJajtTesYJ5Y3bzWezvwhYIDe2iyL%2BN4jPBt6JE7w4eY9V6JXmw19r0bvDhgDYn2N1iVNbEH2vuw2vkj%2FbToXUzxhsOBwmi4tL0%2BO8WgwRCCU2xVrgo27KRLR4Cg1c%2ByTDOrNTBAu%2FFD0oHmsNP27XMO8c3jp%2BvENo9GyISk2V%2BA7X9veV%2FyRqsnD0hEOkkqjnmCF%2Bd17sfMswDIVLBlEkrh7m%2BFP21LgoZDcBPwdazn8OT7xUWqAz8NRekyrYxhjm39KP8p4SBbnjBRn%2B1EtbDmY0YxYhB%2BSHaaq7b1389AFO5GEj7T8mPhiLTePFUliLkJxJs08KQ1N6CBNUDgLoMP2svI36P8Ehdkx%2BktMpzDiuzik0mJHWZczHBZkyPV%2B8pRY9GQv8pXlAKdHq8gMDKA9Nvdc%2FzRPqQ6w39SKJqUMUtUq5WYZp%2BsLCZnqpqtzBRMCQrMNkQyK3PCPVvpYG8Jt6wZlm4Xx58dYwcINBpeq4zs%2BXFcLKv8vPbStBGKFT6x6NJ8MrHaX8xW8an0pfZDHY2QSFGu3qLpV%2FXDFkN4nniReAOm1NwekX7%2Bigt5k9aSX5gRMGj2pd%2BgafSBwgYpJrGRUU9Bpoi82Y2gTxG8p4Sx%2F%2BMn58LvtZY39Of3%2BHWYSOE7LTdcSXG6o98usyh50Ao1ZnXttoYDHMu4Yxpf%2FOydk12WqUVIyWEyhI8lYReT%2BjwwIG5fRC52f%2BHvtdN5vyKMzrI6GTReCqu8OctjBjZLTVHoE9slwKkK2ISnDZy05VJBeI9IKxCdg3kJRj5obv8cjJzPFKXJWD4Df6FXNwAB41%2F5d4gcHdCkuHziuttrceCZPMlDwUfyNs9aT71NG4nYfOErRPuyvnbZa0zDbhtb2KDczosi4LzsOVOuUZf7Osl93ogPi66z%2BGrstLO2V4VwlUIZ3q4A3Skg3KRJhUIVPMXhZ1%2FVvMlH67eJowaW9075GFkslHwFc0qXtqogxnFcsFn08ebW7vh7mi1YSZsnQXoSGRJN7sXv8%2FsrBWBYKqj2bJOdjpWh0TP6o8HY0CIST3DJC466hYNJGSG3rl9LqsB7i9509Oprw8LhmHiAkY7x4f2FNOSpagCNHJkw0cqXy8gx7t7wh3K3FEz8CMAtVCmmacyjtLBs9FL0FHXAJ1yc4284PV9sUWHmDoMi1T2ShGNtrhORQwNHo9HVN4a8NZ8XqeA1Ppi%2Fym%2BgMwlcNJCKD%2F376LXAjSxjFPMr0t0AeNx6EIjqhV28zsVdcVju8bwDP3%2BPHsLgdF38vsXrVGOLNYB4o%2B%2B21waqHhwXd%2FqjzqpzMzXNoCHUUw8O0RMsq4aQFR%2BGqQQ6qS278ZGGKSE4f%2F2S%2Br7%2FROQEOPVev2mD91oXeOiMnAjYqgcjOXfegshbGqctZ776tSGRVKzfQ7MCepOAtOoC6ICaVqgxtSwaL75dWvimvXKTFXkXOV5wC1x6Gv%2Fcl07Q2L2U2WmvT%2BDqi0DOJCt6wQhB5%2Bfgtk1xTQ4othZvraYQpyT1qzXxvEtA0Kw3nTkBcS%2FkWgGYGVswtBwPapM2u0rXzNUJjXUzZJ7Pt3ZyATqv8%2FsxwzlJKuGweIvC%2FQLCAKnjnn%2Fjjbh2dkeJuoqYx%2FphyDwZwpC5NjWgjSNZwJbJf6yfKed1UPAm7LmHZze7XzOOlrcqAvz7hRz4mywDfaKQJSxhnWCbGuxPvlpZcftwahLvP%2FzYk13O4vdNIzY2G8gB9%2F%2BFPVdtwmBUnIl48%2FBi0WWsvKfyI4W0yYrOcas%2BQgDXJVzigdGvzINumK0aNtEFbnpwDhNmEV7h5D4GEIJaMjlYn%2BUe%2BSoqWuo6U7AVtDvI9HZn%2BaPL93gI%2FM0mYTunzcO2aGVzAiLwHXNnfpWVM7olWzqjAO69Q1UAgHmHJWVknNZyzqkr%2F0zaW1c7BBXAlYdRdxcw54FOkqU9qlPX38w3Llx%2BLtZSHeRf2RvSAYqLlGv%2FBeTjE0CsYdhzkNayb8qMyBAFflfnl5HFNaSKeYAQcXy3ObImnxZj%2FaBzmghwq72dfMLeePHlNduDnBNzF%2FHSoi4hQ4DQPnmbcNgWO5XoJiJLcgDv04ZnyccAdvtgN8TqY0XWYaANVHMqDEJBbGcVMjaSAYV776HajaEwkEY5o3FBTJeRMJ0T2rb1ph17nxkG1yDW6KqzxP1eutcJ4ArMOfowkOSa6IZjfonZ8GUHEr9YtzOrvmYCNmPzGONAqEJuCvCE3avdy%2FUgeBB3qLrO98HWu9Uo2ZuMYFrM9f3kB9wnkoCpJNsoNFKPu7r2M9iCtwUYrpthFg9xLSkJJr88Y%2B74j3VlMrqrlYOR9GI2APDbZAiYaX6Hl5YBUE5l%2FdEcqYgDBkQAwkQ6W4kR1mN4DzyU%2FZFxIEoO4B3boEVW5hr%2B8xKO0c6ORr2j1%2F6kDWBvpWN%2B3Nv2owdSyYCuFkllp7rI%2B8eM1lL7FOyzi%2BTM2i6uNoanHuYwUY3pWdUUgfQ6slqehmvrxBZcGBD3A4EMytH5NEdJqzjSOXtlaX%2FE9mv3BF8ktgbGqZYQxCrXxw%2B7HPDo4PtoBW80kE5%2BqyE1b%2FvkmbJR3wzA2gS3nXPiud0sn%2B9mHpBvHPvNnQICtm56DA5N1yJfifAWxoyLTSXhzLdHULz0raupPHE5vhTT9vYx6JHsRsqWyiTLff%2BA4CIIyh8ZQeheKtZYoh9CXdR8Fe3SALCGr2E%2FgGt%2FfpSeArVEgG9j%2FlO0MGl3C3W0tDEQiisNIF4eZPd50lCcuRaNNIsNMh74eqNqRHGH%2FNto6vZ6w79npO3cFHFsrJqr7kOPJFQf4h3MzXbh5dV%2FFjtwvfFOANeqWwQRKIrVf%2B8qbUZct9bkKZbAK%2BNe%2FXr1v8SbJzA0XKvpdscZ0uWLDayawurgrJoDU849Nt7kxTc%2F7PlhRlb%2FHPdpw1AvdzT5iWpEyL3YRNWgRmihKhH3nDDKniRu2%2FpaZPHPtwPXRCXUrV8KqozlV%2BarnR%2FFgEeR7p15Jbnfxo5urGIEDWWF1Yw4qhakMU3%2FtNuW7au8ijPvNCwvphRLioizS4oIjP%2FxgzHQrsXHXnQYrKAqhfDXvK7PbNBoApGPRDpQOE9TXPNw66Zlh0vePXImHDRQZbDxBPR9KIe6y5Ur6nzybF7uCDheyCcMK4XIEkpJi6Edpoay02NiFJhDI5yw89K0Pd3eXf%2BN%2BbPrxJCg%2FukO4TR%2BoGg2f6725dWuoGT7D0T651Tfxd5ZR%2BLXwyt8LxrOfsbdZizvp1l1AvBDQXd5U4HxO6hI%2FajOXvAHawUp9sMeUn7DgtZZm5Zj2N%2FpAD%2FxTwHCqE7UHO1kD3HyZZ7y9inzxNOAdMyDXY1fNBReJ2eDCPOsImhDhKL2ElVB%2FNzIsREP8R6NehNA3ndaLGF2yriL3KD568QoI9ZG2OU3kL6iDeS3432eXLg%3D%3D) *** 自定义一下 "radiusAxis" 值。然后把 "radiusAxis.type" 不要设置为 "value" 就好了 "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241013/f36e53987cb3c1f66f953a523454a87b.png) "Examples - Apache ECharts" (https://link.segmentfault.com/?enc=8BaH3Vubu5wCGpQn8z8d3g%3D%3D.GQ85LQx%2B9gy7SKQFvAwBp1wq9%2FZtDofHv2bfeAqWlwSksjIMrmfTnYV6XBMhmNb4rRqIGSyhRQAcTUa79NZc2uES9j%2Bfxn25N3%2F8zl5U7tsIxBwt0fbJgmR1wwh8G0jd9zSHLkBkF4OsM9iwji2WYXI1BmNM90TXgUphemnjpkfzwmr%2BnyPJOBKDqNLFZSLiSL%2Bjl6GXr%2FE8LGjjuqG85AHl3n5RawywkVNVTcTatbca%2B7j5wZ0hA9FLGMpuJ9%2F0Ro2aNUcpAH5uxNiyxod0JVklQsdCqSrsKUhQC80RcbUux%2Bj0Hrb0g0n4G3SZ8ZQZajctmY7COnDpBmnewJvqn800z0YjmPXdQOG4CQSImcJKPj35GyJcjIt6Hnks5fwOIEv1QJBpmo17LjpsD3gcwSz1t3hl6kyP8KerwUFDjB3fv6ZEdN6sJfzOfBeNAINrWr9WtdbNShnvCRgcOL8tER3jozRNt%2FO5sRlipprBmEb4ostBPJu%2Btwr8igkYwpgOJTBn0rLxoTnmzY8R1xrl825G7%2F78rK0BvU5B5lASHdL%2B6PZ9SxwvlQGBB1WYXdJV1TXHhtpzaxiIqCmx8U7AA70VMs9zT07dxDLCOcNqE%2FHBpjEoLQFRrsWsVCfuTJRg33JyyFF7XSEc1%2BRfI3cMPVwvy6gLpgRI%2BcsO3KBDZw0UbbIx9n0DGqXA8N5jmomA%2F2cckl53dVTIEZXHe%2BiZxOoArw2Kkim6s9Up28wGnpGx51%2FDN7x%2BBFv3h1MFrJ4RT%2BAvcy6FE7hCiXWBmW05A%2FbNW3loqQ6eKVJ6zWGyAJh%2FS4OD9XV%2FVb0UxvciihvOHWKWj2%2BX6wHZMvhNtWpAmw8pV0GnEM1vfphgX0HE7xegB51Ca%2FcE3xH2LjMOv7RdYuU4fUqAkgp9KXugYMYGPvBvW%2FimTEAzY6WGAAGecKT3Jn7QDReGDim6E0h%2BQch0tD1tCS8vDx9It1NGLLJP6lWFpf4vqpXC0GZfCLHaxjxAdXsK7wtK17Fv7%2Bxe518C5lYSWb8TLoG4XIeo6z7Ird2ugkCWHMqzRlNn%2BJ5cdrW6MwtZa%2BVb7TA8jJS0RMIgbnQ3bwep%2Br%2BO%2F8hFRLpfj8gQe3Ptbtd3BKOpY9e3yRjp7gxte0ZpJQNon%2FOa%2FrafOXMsdZ%2B1D%2FhxNHL0AnAjsbp0hGO3hIBfsoqJh50ImSSdqmMOsA3LNAufomul051ct%2BI7APcE6Gpm7dEI9TEIr%2FY6QUrR07eIARNMP4jQw%2FGcsWB6ireEGutfnVaCMVOIMoned7sCHwQlIEKANAGC2mqOuyHboxnqBYoAJI2bPu3gkZ2FmJGVgPF34XV0b8Snv6FOnrhwsQY5L3zSaWrWxvyq1IXXj6UNgKJYeJodbpnVkMNtuaFEL6wa9ZRzDl1DnNZTOOwUjj4BPBZ2bsgO%2FNAJjIxQ64H6aMtzUwOOF7yHVod2Cy%2BM%2BfmPLKd076CAcMdrMRTGgEDIKXQUF%2F3yTvjII8vYfDdp8mtTFRJmyKG6kAWKtOkNxyMOWcxQr6L21Kv%2BQDJ6svS5LwCtP0MYHNEBF9D4IzgI7%2F0XtadR%2FiWLGz6MxeLEuHo3FpkEnZl2uvWGU%2FG7LIx5wfHOCp7LZ9PhfaccQ%2FnjRlLP9Luzel96oy1SzfJ4CBEI3R9S4L9L5KArRkC09T7gKPucpE9UqSENHusOd9PCt4RWEGwR2Qem%2BHqes7exB0fZpMLgoi2%2FM0%2B9nKMWRS5lEu36dL8PYtcuT0tkPS1o91OpCRaTMPnek1M0jyHeSqeGSbSn3FcBcCcsNn%2BZimyJdrv%2BeVJOS0JdSmWv3AkJImtnlSrbBPI8%2BtZCm2oOw7%2BK5kMGmMBms3R7OMuj509q2akSypDwfdqIinI9GOHJoZiCD4E1jwFOR16X18Shyy2TyzXm9aY%2Flx%2B63slTffFhDEDk12xkYLoHwr7QM5K9kl1Inpt3dnWKQRBFGYTs7lG7UsSMraAM%2FCKQTUHfd07qVp2POIQo22qCch2OiOx57bUvJ8cGBP2Xv%2Flxx3eA8d9S0P%2BnPAQZvmHilks4vhcVbr%2BGwgTBIgH1uxqK66%2Fft2yj3uq6B4wDZVxcUQgmd6S1Azl1FfNv1H%2FSnQ2HTiUaKz921%2BdVVTeT4ROIxp0tdnR7c6IWEKvlasTKG5zF4rrXDkPtjWen94OSMcEp5oG%2FudXOSNQXsv9foB85QdqLfPiGbrltk%2BR7Kf8MRbeD3409Vyqyz89K8H3%2BeRivhkOPxCSp9Hyfb%2FFTruST%2F5H5ZWk25pQB4gbYHIiU7lMHVovnkwc2JmrNDYHbGRzTDCXlYX9iDD9sbDWHSRqG7hxUFVmMLVpBGWnduRV7FQcM%2FpD6%2Bt%2FzSrU0pm%2FPdc6EwgiQfFNgccV9bkCfMon0p1S9RUg%2FO%2BhG5prHA2UBq2XwmiX5DDKnaSQGyWDWutUVUP3Zlfiznl2vMwOzHYwOgOv2srimvzp82ZZ%2F%2Bh4JC5Mjaq1kwaaoh0x97YbxM83ZtCgeTfKKbRAQPAJgjNRAJhmzsDLzYek0HVIfv76dgeFAnTM2kbDT5sQGjWlOC7NuHNrWD%2BhyOkxgJp2mYJ9bLLgV1pbWbUhTxAjPDkhFX8UZ2lAVAcLSFv7yKe2XYBABwV%2BDPZppA7EcaOPkwWx%2BtVzhHu5uCsyJxLfNIu%2BUX6UXO0ZbBcARb%2Fopn%2FXInxMxfiFlMbs%2F86TtuzkmRnSpCP0OIWU2ZRvenG6TRYZlkFpN7dgRogy4dvleNp83fIMLtXq7KYVOl%2BN%2BvAF5sDiY7epjxOVRPTc63MHnPbgon0jnBoBubPdbbmdu3BTPk7YNJqcLAmhEhIzhXeMjSyfVE0NcnJjNlmopKdtPl0bfi12gW0s0v0L2tYFp5Cpp2VcKfLegwa4%2F31nWsw%3D%3D)