秋云uecharts写排行榜信息
时间: 2023-08-16 10:22:05 浏览: 112
离散数学耿秋云第五版官方PPT
好的,可以使用 ECharts 中的柱状图来展示排行榜信息。以下是一个简单的示例:
HTML 代码:
```html
<div id="chart" style="width: 600px;height:400px;"></div>
```
JavaScript 代码:
```javascript
// 假设以下是排行榜数据
var data = [
{ name: '张三', score: 95 },
{ name: '李四', score: 87 },
{ name: '王五', score: 78 },
{ name: '赵六', score: 71 },
{ name: '钱七', score: 68 }
];
// 将数据按照分数从高到低排序
data.sort(function(a, b) { return b.score - a.score; });
// 提取姓名和分数数据
var names = [], scores = [];
for (var i = 0; i < data.length; i++) {
names.push(data[i].name);
scores.push(data[i].score);
}
// 使用 ECharts 画柱状图
var chart = echarts.init(document.getElementById('chart'));
var option = {
title: { text: '排行榜' },
xAxis: { type: 'category', data: names },
yAxis: { type: 'value' },
series: [{ type: 'bar', data: scores }]
};
chart.setOption(option);
```
这段代码会生成一个柱状图,横轴为姓名,纵轴为分数,柱子的高度表示分数大小,从高到低排列。可以根据实际情况调整样式和配置项。
阅读全文