echarts柱形图多个柱形图,每个柱形图显示多个属性
时间: 2023-08-22 07:03:51 浏览: 198
echarts 横着显示的柱状图
您可以使用 ECharts 的堆叠柱状图(stacked bar chart)来显示多个属性。堆叠柱状图将每个属性的值堆叠在一起,以便在同一柱形图中显示多个属性。
下面是一个使用 ECharts 创建堆叠柱状图的示例代码:
```javascript
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['属性1', '属性2', '属性3']
},
xAxis: {
type: 'category',
data: ['柱1', '柱2', '柱3', '柱4', '柱5']
},
yAxis: {
type: 'value'
},
series: [
{
name: '属性1',
type: 'bar',
stack: '属性',
data: [120, 132, 101, 134, 90]
},
{
name: '属性2',
type: 'bar',
stack: '属性',
data: [220, 182, 191, 234, 290]
},
{
name: '属性3',
type: 'bar',
stack: '属性',
data: [150, 232, 201, 154, 190]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
```
在上面的示例中,我们创建了一个堆叠柱状图,其中每个柱形图显示了三个属性(属性1、属性2、属性3)的数据。每个属性的值通过 `series` 数组中的对象进行配置。通过设置 `stack` 属性为相同的值,可以将不同属性的数据堆叠在一起。
您可以根据自己的需求修改示例代码中的数据和配置项来适应您的情况。希望对您有所帮助!
阅读全文