<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>