如何基于数据动态调整ECharts雷达图的指标数量？

问题根源 #

你当前的代码存在两个核心问题：

1. 用option3 + radar拼接对象是错误操作，这会将对象转为字符串拼接，而非合并配置对象。
2. indicator数组是硬编码的固定项，没有根据area_name的长度动态生成。

可行实现方法 #

核心思路是通过数组遍历动态生成indicator配置项，再将其正确合并到ECharts的option配置中，具体步骤如下：

1. 动态生成指标数组
   利用Array.map()遍历area_name数组，自动生成每个指标的配置项，无需硬编码固定数量的指标。

2. 正确合并配置对象
   将动态生成的radar配置直接整合到option3中，或使用Object.assign/展开运算符...合并，避免字符串拼接的错误。

修改后的完整代码 #

<div class='container' id='main' style='width: 80vw; height:80vh'>
    {{ area_name|json_script:'area_name' }}
    {{ area_scores|json_script:'area_scores' }}
    {{ area_colors|json_script:'area_colors' }}
    {{ max|json_script:'max' }}
    {{ overallcolor|json_script:'overallcolor' }}

    <script type='text/javascript'>
        let area_name = JSON.parse(document.getElementById('area_name').textContent);
        let area_scores = JSON.parse(document.getElementById('area_scores').textContent);
        let area_colors = JSON.parse(document.getElementById('area_colors').textContent);
        let max = JSON.parse(document.getElementById('max').textContent);
        let overall_color = JSON.parse(document.getElementById('overallcolor').textContent);

        let chartDom3 = document.getElementById('main');
        let myChart3 = echarts.init(chartDom3);

        // 动态生成indicator数组
        const indicator = area_name.map(name => ({
            name: name,
            max: max,
            color: 'black',
            axisLabel: {
                color: 'black',
                show: true,
                interval: 0,
                showMinLabel: false
            }
        }));

        let option3 = {
            color: ['darkgrey'],
            aria: {
                enabled: true
            },
            title: {
                text: 'Business Countinuity Results',
                left: 'center',
            },
            // 添加radar配置，使用动态生成的indicator
            radar: {
                // shape: 'circle',
                indicator: indicator
            },
            series: [
                {
                    type: 'radar',
                    data: [
                        {
                            value: area_scores,
                            areaStyle: {
                                color: overall_color,
                                opacity: 0.5
                            },
                            label: {
                                show: true,
                                formatter: function (params) {
                                    return params.value;
                                }
                            }
                        },
                    ]
                }
            ]
        };

        myChart3.setOption(option3);
    </script>
</div>

关键修改说明 #

• 动态生成indicator：使用area_name.map()遍历所有指标名称，自动生成每个指标的配置，无论area_name长度是多少，都能适配。
• 整合radar配置：将radar直接写入option3中，避免了错误的对象拼接操作。
• 移除冗余配置：删除了原代码中无效的axisLabel配置（该配置属于radar的indicator，而非series的data项）。

动态更新场景（可选） #

如果需要在页面加载后动态修改指标数量，只需重新生成indicator数组，再调用setOption更新配置即可：

// 假设area_name发生变化，重新生成indicator
const newIndicator = newAreaName.map(name => ({
    name: name,
    max: max,
    color: 'black',
    axisLabel: {
        color: 'black',
        show: true,
        interval: 0,
        showMinLabel: false
    }
}));

// 更新配置，强制合并radar部分
myChart3.setOption({
    radar: {
        indicator: newIndicator
    }
}, { notMerge: false });

内容的提问来源于stack exchange，提问作者Jlv