小学三年级全级100学生,做几个echarts图,第一个,男女比例柱状图;第二个,男女每个一岁之间的比例图;第三个,期中考试语数英三科成绩降序排列,标明每一科成绩的最高和人名和平均数;
时间: 2024-01-04 13:01:57 浏览: 85
好的,我可以为你提供这三个图表的示例代码。你可以根据自己的数据和需求进行调整和美化。以下是示例代码:
**男女比例柱状图**
```javascript
import echarts from 'echarts';
const chart = echarts.init(document.getElementById('chartContainer'));
const data = [
{ gender: '男', count: 60 },
{ gender: '女', count: 40 }
];
const option = {
title: {
text: '男女比例'
},
xAxis: {
type: 'category',
data: data.map(item => item.gender)
},
yAxis: {
type: 'value'
},
series: [{
data: data.map(item => item.count),
type: 'bar'
}]
};
chart.setOption(option);
```
**男女每个一岁之间的比例图**
```javascript
import echarts from 'echarts';
const chart = echarts.init(document.getElementById('chartContainer'));
const data = [
{ age: '6岁', maleCount: 30, femaleCount: 20 },
{ age: '7岁', maleCount: 25, femaleCount: 15 },
{ age: '8岁', maleCount: 20, femaleCount: 15 },
];
const option = {
title: {
text: '男女每个一岁之间的比例'
},
legend: {
data: ['男', '女']
},
xAxis: {
type: 'category',
data: data.map(item => item.age)
},
yAxis: {
type: 'value'
},
series: [{
name: '男',
data: data.map(item => item.maleCount),
type: 'bar'
},
{
name: '女',
data: data.map(item => item.femaleCount),
type: 'bar'
}]
};
chart.setOption(option);
```
**期中考试语数英三科成绩降序排列**
```javascript
import echarts from 'echarts';
const chart = echarts.init(document.getElementById('chartContainer'));
const data = [
{ name: '张三', chinese: 90, math: 85, english: 92 },
{ name: '李四', chinese: 95, math: 88, english: 85 },
{ name: '王五', chinese: 88, math: 92, english: 90 },
// 其他学生数据...
];
// 按照语文成绩降序排序
data.sort((a, b) => b.chinese - a.chinese);
const option = {
title: {
text: '期中考试成绩排名'
},
xAxis: {
type: 'category',
data: data.map(item => item.name)
},
yAxis: {
type: 'value'
},
series: [{
name: '语文',
data: data.map(item => item.chinese),
type: 'bar'
},
{
name: '数学',
data: data.map(item => item.math),
type: 'bar'
},
{
name: '英语',
data: data.map(item => item.english),
type: 'bar'
}]
};
chart.setOption(option);
```
以上是三个示例图表的代码。你可以在HTML中创建一个容器(例如div),并将其id传递给`echarts.init()`函数中的`getElementById()`方法,以便在该容器中显示图表。记得在项目中引入ECharts库。希望这些示例能对你有所帮助!
阅读全文