本文介绍了如何在HTML中使用ECharts库创建一个基本的柱状图，通过JavaScript设置图表配置并展示数据。
一个简单的ECharts的demo如下所示：
在html文件中添加以下代码：
html
<!DOCTYPE html>
<html>
<head>
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个具有指定高度的 DOM 容器 -->
<div id="chart" style="width:600px; height:400px;"></div>
<script>
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts Demo'
},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5,20,36,10,10]
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
在浏览器打开上述html文件，即可显示一个简单的柱状图。这个图表有一个标题，x轴显示'A', 'B', 'C', 'D', 'E'五个类别，y轴表示销量，柱状图的高度表示销量的大小。
一个简单的ECharts的demo
最新推荐文章于 2025-05-22 12:27:33 发布
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
