javascript - ehcarts 实现星空图 半径轴显示？

Question

星空图如何实现由内到外半径轴的数值大小是从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</br>${item.marker}${item.seriesName} : ${item.data[0] + ',' + item.data[1] + ',' + item.data[2]}</br>`;            htmlF += `卫星信息：</br>${item.marker}${item.seriesName} : ${item.data[0] + ',' + item.data[1] + ',' + item.data[2]}</br>`;          } else {            htmlF += `${item.marker}${item.seriesName} : ${item.data[0] + ',' + item.data[1] + ',' + item.data[2]}</br>`;          }        });        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();}

目前我随便怎么修改 由内到外都是从0-90的

Answer 1

Edit

可以用 radiusAxis. inverse ，之前找文档的时候没看到 ��

这样也不需要用自定义的 radiusAxis.data 值了。

Examples - Apache ECharts

---

自定义一下 radiusAxis 值。然后把 radiusAxis.type 不要设置为 value 就好了

Examples - Apache ECharts