echarts实现排行柱形图
要实现排行柱形图，首先需要准备好数据，包括排名和对应的数值。然后使用echarts库来绘制柱形图。
以下是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 排行柱形图</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.2.1/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个用于绘制图表的容器 -->
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
// 准备好数据
var data = [{
name: '项目1',
value: 100
}, {
name: '项目2',
value: 80
}, {
name: '项目3',
value: 60
}, {
name: '项目4',
value: 40
}, {
name: '项目5',
value: 20
}];
// 初始化echarts实例
var chart = echarts.init(document.getElementById('chart'));
// 配置项
var option = {
title: {
text: '排行柱形图'
},
tooltip: {},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: data.map(function (item) {
return item.name;
})
},
series: [{
type: 'bar',
data: data.map(function (item) {
return item.value;
}),
label: {
show: true,
position: 'right',
formatter: '{c}'
}
}]
};
// 使用配置项绘制图表
chart.setOption(option);
</script>
</body>
</html>
将上述代码保存为一个html文件，然后在浏览器中打开该文件，即可看到排行柱形图的效果。
原文地址: https://www.cveoy.top/t/topic/i4Ur 著作权归作者所有。请勿转载和采集!