echarts柱状图排行榜
时间: 2023-12-26 09:05:55 浏览: 20
以下是使用Echarts实现排名柱状图的示例代码:
```javascript
// 引入echarts库
import echarts from 'echarts';
// 创建一个DOM容器
var container = document.getElementById('chart');
// 初始化echarts实例
var chart = echarts.init(container);
// 定义数据
var data = [
{ name: 'A', value: 100 },
{ name: 'B', value: 90 },
{ name: 'C', value: 80 },
{ name: 'D', value: 70 },
{ name: 'E', value: 60 }
];
// 定义x轴和y轴的数据
var xData = [];
var yData = [];
data.forEach(function(item) {
xData.push(item.name);
yData.push(item.value);
});
// 配置项
var option = {
// 设置图表的标题
title: {
text: '排名柱状图'
},
// 设置x轴的数据
xAxis: {
data: xData
},
// 设置y轴的数据
yAxis: {},
// 设置柱状图的数据
series: [{
type: 'bar',
data: yData
}]
};
// 使用配置项初始化图表
chart.setOption(option);
```
你可以将上述代码放入一个HTML文件中,并在浏览器中运行,即可看到排名柱状图的效果。