echarts立体柱状图双柱
时间: 2023-08-27 13:22:55 浏览: 123
要绘制echarts立体柱状图的双柱,你可以按照以下步骤进行操作:
1. 首先,确保你已经引入了ECharts库,并创建了一个包含图表的容器。例如,在HTML文件中创建一个div元素作为容器:
```html
<div id="chartContainer" style="width: 600px; height: 400px;"></div>
```
2. 接下来,使用JavaScript代码初始化图表,并配置相应的数据和样式。下面是一个示例代码:
```javascript
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chartContainer'));
// 配置数据
var data1 = [120, 200, 150, 80, 70];
var data2 = [80, 120, 100, 60, 50];
// 配置图表选项
var option = {
tooltip: {},
legend: {
data: ['柱子1', '柱子2']
},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [{
name: '柱子1',
type: 'bar',
data: data1,
barCategoryGap: '50%',
itemStyle: {
emphasis: {
color: '#FFC107'
}
}
}, {
name: '柱子2',
type: 'bar',
data: data2,
barCategoryGap: '50%',
itemStyle: {
emphasis: {
color: '#E91E63'
}
}
}]
};
// 使用配置项显示图表
myChart.setOption(option);
```
3. 最后,通过调用`setOption`方法将配置项应用到图表上。
以上示例代码中,`data1`和`data2`数组分别表示两个柱子的高度,`xAxis`配置了横轴的刻度标签,`series`数组中定义了两个柱状图系列,每个系列都可以配置不同的样式。
你可以根据自己的需求,调整数据和样式配置,以绘制出符合你要求的立体双柱状图。
阅读全文