处理前端传来的json数据[{"value":40.0,"name":"临床医学1班"},{"value":36.36,"name":"信息与计算科学1班"}],并将他们传入echarts柱状图
时间: 2023-09-02 11:14:10 浏览: 48
假设你使用的是Echarts 5版本,可以按照以下步骤进行处理:
1. 安装 Echarts 5 和 jQuery:
```bash
npm install echarts@5.2.1
npm install jquery
```
2. 在 HTML 文件中引入 Echarts 和 jQuery:
```html
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```
3. 在 HTML 文件中添加一个 div 作为图表容器,并设置其宽度和高度:
```html
<div id="chart" style="width: 600px; height: 400px;"></div>
```
4. 在 JavaScript 文件中处理传来的 JSON 数据并生成图表:
```javascript
// 假设传来的 JSON 数据为 data
var data = [{"value":40.0,"name":"临床医学1班"},{"value":36.36,"name":"信息与计算科学1班"}];
// 将 JSON 数据转换为 Echarts 所需的格式
var chartData = [];
for (var i = 0; i < data.length; i++) {
chartData.push({ value: data[i].value, name: data[i].name });
}
// 初始化 Echarts 实例
var chart = echarts.init(document.getElementById('chart'));
// 配置柱状图
var option = {
title: {
text: '班级人数统计'
},
tooltip: {},
xAxis: {
data: chartData.map(function (item) { return item.name; })
},
yAxis: {},
series: [{
name: '人数',
type: 'bar',
data: chartData.map(function (item) { return item.value; })
}]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
```
5. 最后,将图表显示在页面上:
```javascript
// 将图表显示在页面上
chart.resize();
```
这样,你就可以在页面上看到一个柱状图,它显示了传来的 JSON 数据中每个班级的人数。