ECharts 5 雷达图可配置复用函数实现问题咨询

你遇到的图表不渲染问题核心是配置项不匹配，具体问题和修复方法如下：

• 已修复的DOM加载问题：你添加的window.onload逻辑是正确的，已经解决了Cannot read property 'getAttribute' of null报错
• 剩余不渲染的核心问题：series.data中的单条数据没有配置name属性，和legend.data中定义的分类名称无法匹配，导致ECharts找不到对应渲染的系列

JS代码 #

function createChart(divId,data, seriesName = 'Actual Spending') {
  // 新增DOM容错判断，避免找不到容器时报错
  const dom = document.getElementById(divId)
  if(!dom) return
  const myChart = echarts.init(dom);

  const option = {
    title: {
      text: 'Basic Radar Chart'
    },
    legend: {
      data: ['Allocated Budget', 'Actual Spending']
    },
    radar: {
      indicator: [
        { name: 'Sales', max: 6500 },
        { name: 'Administration', max: 16000 },
        { name: 'Information Technology', max: 30000 },
        { name: 'Customer Support', max: 38000 },
        { name: 'Development', max: 52000 },
        { name: 'Marketing', max: 25000 }
      ]
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: data,
            name: seriesName // 新增name属性，和legend配置的分类对应
          },
        ]
      }
    ]
  };
  myChart.setOption(option);
  // 新增自适应窗口优化
  window.addEventListener('resize', () => myChart.resize())
};

const data1 = [4200, 3000, 20000, 35000, 50000, 18000];
const data2 = [5000, 14000, 28000, 26000, 42000, 21000];

window.onload = function () { 
  createChart('main', data1, 'Allocated Budget');
  createChart('main-2', data2, 'Actual Spending');
};

HTML代码 #

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <div id="main-2" style="width: 600px;height:400px;"></div>
    </body>
</html>

• 如果需要更高的复用性，可以把雷达的指标配置、标题、legend配置也作为参数传入createChart函数，适配不同业务场景
• 可以添加图表销毁逻辑，避免页面频繁切换时出现内存泄漏问题

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