echarts vue 柱状图 怎么重合
时间: 2023-11-11 21:00:00 浏览: 95
springboot echarts vue 柱状图
要让echarts vue柱状图重合,可以在option中设置多个series,并将它们的xAxisIndex和yAxisIndex设置为相同的值,这样它们就会在同一坐标系中显示。同时,需要将每个series的barWidth设置为较小的值,以便它们可以重叠在一起。
以下是一个示例代码:
```
<template>
<div id="chart" style="width: 600px; height: 400px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
mounted() {
const chart = echarts.init(document.getElementById('chart'))
const option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Series 1',
type: 'bar',
data: [5, 20, 36, 10, 10],
barWidth: 10,
xAxisIndex: 0,
yAxisIndex: 0
},
{
name: 'Series 2',
type: 'bar',
data: [15, 6, 12, 25, 8],
barWidth: 10,
xAxisIndex: 0,
yAxisIndex: 0
}
]
}
chart.setOption(option)
}
}
</script>
<style>
#chart {
margin-top: 20px;
}
</style>
```
阅读全文