echarts柱状图案例
时间: 2024-07-19 13:01:19 浏览: 128
echarts 柱状图渐变色背景
5星 · 资源好评率100%
ECharts是一个强大的JavaScript图表库,可以创建各种类型的图表,包括柱状图。下面是一个简单的柱状图案例的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
type: 'category',
data: ['商品A', '商品B', '商品C', '商品D', '商品E']
},
yAxis: {
type: 'value'
},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10]
}
]
};
var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);
</script>
</body>
</html>
```
在这个例子中,我们创建了一个柱状图,x轴显示商品名称,y轴表示销量数据。系列(series)部分定义了柱状图的数据和标签。运行此代码会在页面上生成一个柱状图。
阅读全文