echarts横向柱状图
ECharts 是百度开源的一个数据可视化库，可以用来创建各种类型的图表，包括横向柱状图。
以下是一个使用 ECharts 创建横向柱状图的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 横向柱状图示例</title>
<!-- 引入 ECharts 的 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个具有指定 id 的 div 元素，用于放置图表 -->
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
// 初始化图表
var chart = echarts.init(document.getElementById('chart'));
// 配置图表的参数
var option = {
title: {
text: '横向柱状图示例'
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['数据1', '数据2', '数据3', '数据4', '数据5']
},
series: [
{
name: '柱状图',
type: 'bar',
data: [20, 30, 40, 50, 60]
}
]
};
// 使用配置项显示图表
chart.setOption(option);
</script>
</body>
</html>
在上面的示例中，我们首先引入了 ECharts 的 JavaScript 文件，然后创建一个具有指定 id 的 div 元素用于放置图表。接着，我们使用 echarts.init 方法初始化图表，并通过配置项 option 来设置图表的参数，包括图表的标题、x 轴和 y 轴的类型以及数据等。最后，使用 chart.setOption 方法将配置项应用到图表上，从而显示出横向柱状图。
你可以根据实际需求修改配置项中的参数，例如修改标题、x 轴和 y 轴的标签以及数据等，从而创建出符合你要求的横向柱状图。
原文地址: https://www.cveoy.top/t/topic/i3Hu 著作权归作者所有。请勿转载和采集!