使用echarts绘制统计图表

ECharts 是一个强大的数据可视化工具，可以用来创建多种类型的统计图表。以下是如何使用 echarts 绘制统计图表的一个基本步骤：

1. **引入库**[^1]：首先，需要在 Vue 或其他前端框架项目中引入 ECharts 的库文件，通常是通过 CDN 或者本地安装。

<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>

2. **初始化图表**：定义一个图表容器，比如一个 `<div>` 元素，并设置其 id，用于 ECharts 创建图表时关联到该元素。

<div id="chartContainer" style="width: 600px;height:400px;"></div>

3. **数据准备**：收集考试分数的数据，可以是对象数组，每个对象代表一个学生及其各科成绩。

const data = [
  { name: '学生A', scores: [85, 92, 78, 89, 95] },
  { name: '学生B', scores: [90, 88, 85, 92, 86] },
  // 更多学生数据...
];

4. **配置图表类型**：选择合适的图表类型，如雷达图（`radar`）展示学生的综合得分分布。

const option = {
  series: [{
    type: 'radar',
    name: '考试分数',
    data: data.map(student => student.scores),
    // 雷达图的其它配置...
  }]
};

5. **渲染图表**：最后调用 `echarts.init()` 方法，传入图表容器的 DOM 元素，并设置选项 `option`。

const myChart = echarts.init(document.getElementById('chartContainer'));
myChart.setOption(option);