复制代码<template>
<div class="chart-container">
<div ref="chart" class="chart"></div>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
data() {
return {
chartData: [], // 存储统计数据
};
},
mounted() {
// 在组件挂载之后初始化图表
this.initChart();
},
methods: {
initChart() {
const chart = echarts.init(this.$refs.chart);
const option = {
title: {
text: '销售统计',
},
legend: {
data: ['销售额', '销售数量'],
},
xAxis: {
type: 'category',
data: this.chartData.map(item => item.time),
},
yAxis: [
{
type: 'value',
name: '销售额',
},
{
type: 'value',
name: '销售数量',
},
],
series: [
{
name: '销售额',
type: 'line',
data: this.chartData.map(item => item.amount),
yAxisIndex: 0,
},
{
name: '销售数量',
type: 'bar',
data: this.chartData.map(item => item.quantity),
yAxisIndex: 1,
},
],
};
chart.setOption(option);
},
},
};
</script>