opt_web/src/views/product-manage/comment-detail/component/AverageMonthly.vue

<script lang="ts" setup>
/**
 * @Name: AverageMonthly.vue
 * @Description: 月平均分图表
 * @Author: Cheney
 */

import * as echarts from 'echarts';
import * as api from '../api';
import { useResponse } from '/@/utils/useResponse';


const props = defineProps({
  asin: String
});
const { asin } = props;

let chartRef: any = useTemplateRef('chartRef');
let chart: echarts.ECharts | null = null;
let resizeObserver: ResizeObserver | null = null;
let chartData: any = ref([]);

onBeforeMount(() => {
  fetchChartData();
});

onMounted(() => {
  initChart();
});

onUnmounted(() => {
  resizeObserver?.disconnect();
  chart?.dispose();
});

function updateChart() {
  if (!chart || chartData.value.length === 0) return;

  const chartOptions = {
    title: {
      text: '每月平均评分'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: [ '总量', '平均分' ]
    },
    grid: {
      top: '20%',
      left: '10%',
      right: '10%',
      bottom: '10%'
    },
    dataset: {
      dimensions: [ 'month', 'total', 'avg_score' ],
      source: chartData.value
    },
    xAxis: {
      type: 'category'
    },
    yAxis: [
      {
        id: 0,
        type: 'value',
        name: '总量',
        nameTextStyle: {
          fontSize: 14,
          color: '#3480CE',
        },
        splitLine: {
          show: true
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#3480CE',
            width: 1
          }
        }
      },
      {
        id: 1,
        type: 'value',
        name: '平均分',
        nameTextStyle: {
          fontSize: 14,
          color: '#F19A38',
        },
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#F19A38',
            width: 1
          }
        }
      }
    ],
    series: [
      {
        yAxisIndex: 0,
        color: '#3480CE',
        name: '总量',
        type: 'bar',
        barWidth: '18px',
        itemStyle: {
          borderRadius: [ 4, 4, 4, 4 ]
        }
      },
      {
        yAxisIndex: 1,
        color: '#F19A38',
        name: '平均分',
        type: 'line',
        areaStyle: {
          // 设置渐变颜色
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(241,154,56, 0.1)'
            },
            {
              offset: 1,
              color: 'rgba(241,154,56, 0)'
            }
          ])
        }
      }
    ]
  };

  chart.setOption(chartOptions);
}

function initChart() {
  if (!chartRef.value) return;

  chart = echarts.init(chartRef.value);
  updateChart();

  resizeObserver = new ResizeObserver(() => {
    chart?.resize();
  });
  if (chartRef.value) {
    resizeObserver.observe(chartRef.value);
  }
}

async function fetchChartData() {
  const res = await useResponse(api.getChartData, { asin });
  if (res.code === 2000 && res.data) {
    chartData.value = res.data;
    updateChart();
  }
}
</script>

<template>
  <el-card class="border-none" shadow="hover">
    <div v-show="chartData.length > 0" ref="chartRef" class="chart"></div>
    <el-empty v-if="chartData.length == 0" description="暂无数据" class="chart" />
  </el-card>
</template>

<style scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>