ECharts雷达图背景色遮挡数据值？如何设置正确的背景色？

ECharts雷达图背景色与数据值冲突的解决方案

在使用ECharts绘制雷达图时，经常会遇到背景色遮挡数据值的问题。这是因为ECharts的配置选项容易混淆。

问题根源：

backgroundColor属性控制的是雷达图中标签的背景色，而非雷达图区域的整体背景色。而areaStyle.color属性则控制的是雷达图数据区域的填充颜色。

解决方法：

要设置雷达图区域的背景颜色，需要使用radar.axisArea.areaStyle.color属性。这个属性专门用于控制雷达图坐标轴区域的背景颜色。

修改后的代码示例：

option = {
    radar: {
        axisArea: {
            areaStyle: {
                color: '#333' // 设置雷达图区域背景色
            }
        },
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999', // 设置标签背景色
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
            {name: "整式的除法", max: 1, color: "#333333"},
            // ...其他指标
        ],
    },
    series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        areaStyle: {
            color:'#FFC05E', // 设置数据区域填充色
        },
        data: [
            {
                value: [ 0, 0, 1, 0, 1, 1, 0, 0],
                name: ''
            }
        ]
    }]
};

通过以上修改，radar.axisArea.areaStyle.color设置了雷达图区域的背景色，areaStyle.color设置了数据区域的填充色，两者互不干扰，从而解决了背景色遮挡数据值的问题，使图表更清晰易读。