echarts绘制一个堆叠立体柱状图(数据自定义)
时间: 2023-06-29 18:19:45 浏览: 447
Python 堆叠柱状图绘制方法
好的,以下是使用ECharts绘制一个堆叠立体柱状图的示例代码,您可以根据自己的需求修改数据和样式:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>堆叠立体柱状图</title>
<!-- 引入ECharts文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个容器用于显示ECharts图表 -->
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('chart'));
// 定义柱状图数据
var data = {
categories: ['一月', '二月', '三月', '四月', '五月', '六月'],
series: [
{
name: '系列一',
data: [10, 20, 30, 40, 50, 60],
stack: '堆叠',
type: 'bar'
},
{
name: '系列二',
data: [20, 30, 40, 50, 60, 70],
stack: '堆叠',
type: 'bar'
},
{
name: '系列三',
data: [30, 40, 50, 60, 70, 80],
stack: '堆叠',
type: 'bar'
}
]
};
// 配置图表的参数
var option = {
title: {
text: '堆叠立体柱状图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['系列一', '系列二', '系列三']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true,
data: data.categories
},
yAxis: {
type: 'value'
},
series: data.series
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
这个示例代码将会生成一个堆叠立体柱状图,其中包含三个系列,每个系列包含六个数据。您可以根据需要修改数据和样式,以满足自己的需求。
阅读全文