vue3中echarts复合柱状统计图代码
时间: 2023-11-20 17:47:14 浏览: 103
请提供更具体的需求和数据,这样才能给出完整的代码。以下是一个简单的复合柱状统计图示例:
```html
<template>
<div class="chart-container">
<div ref="chart" class="chart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
mounted() {
this.initChart();
},
methods: {
initChart() {
const chart = echarts.init(this.$refs.chart);
const option = {
tooltip: {},
// X轴数据
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F']
},
// Y轴数据
yAxis: [
{
type: 'value',
name: '数量',
min: 0
},
{
type: 'value',
name: '百分比',
min: 0,
max: 100
}
],
// 系列数据
series: [
{
name: '柱状图1',
type: 'bar',
data: [100, 200, 300, 400, 500, 600]
},
{
name: '柱状图2',
type: 'bar',
data: [800, 700, 600, 500, 400, 300]
},
{
name: '折线图',
type: 'line',
yAxisIndex: 1,
data: [10, 20, 30, 40, 50, 60]
}
]
};
chart.setOption(option);
}
}
};
</script>
<style>
.chart-container {
width: 100%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.chart {
width: 80%;
height: 80%;
}
</style>
```
阅读全文