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