ads_web/src/views/searchTerm/topSearchTermRank/column-chart.vue

<script setup lang="ts">
/**
 * @Name: column-chart.vue
 * @Description: 表格内的折线图
 * @Author: Cheney
 */

import { PropType, ref, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  rowData: {
    type: Object,
    required: true,
  },
});

const chartRef = ref<HTMLElement | null>(null);
let chart: echarts.ECharts | null = null;
let resizeObserver: ResizeObserver | null = null;

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

onUnmounted(() => {
  // 清理 ResizeObserver
  if (resizeObserver) {
    resizeObserver.disconnect();
  }
  if (chart) {
    chart.dispose();
    chart = null;
  }
});

watch(
  () => props.rowData,
  () => {
    updateChart();
  },
  { immediate: true, deep: true }
);

function updateChart() {
  if (!chart || !props.rowData) return;

  const dates = Object.keys(props.rowData.searchFrequencyRank[0]);
  const searchFrequencyValues = Object.values(props.rowData.searchFrequencyRank[0]);
  const clickShareValues = Object.values(props.rowData.clickShare[0]);
  const conversionShareValues = Object.values(props.rowData.conversionShare[0]);

  const option: echarts.EChartsOption = {
    xAxis: {
      type: 'category',
      data: dates,
      axisLabel: {
        rotate: 45,
        interval: 0,
      },
    },
    yAxis: [
      {
        id: 0,
        type: 'value',
        name: 'Search Frequency Rank',
        nameTextStyle: {
          fontWeight: 'bold',
          fontSize: 14,
          color: '#333'
        },
        splitLine: {
          show: true, // 设置显示分割线
        },
      },
      {
        id: 1,
        type: 'value',
        name: 'Share Rate',
        nameTextStyle: {
          fontWeight: 'bold',
          fontSize: 14,
          color: '#333'
        },
        position: 'right',
        splitLine: {
          show: false, // 设置显示分割线
        },
        axisLabel: {
          formatter: '{value}%',
        },
        // axisLine: {
        //   show: true,
        // },
        // show: true,
      },
    ],
    series: [
      {
        name: 'Search Frequency Rank',
        data: searchFrequencyValues,
        type: 'bar',
        barWidth: '18px',
        itemStyle: {
          color: '',
          borderRadius: [4, 4, 4, 4],
        },
        yAxisIndex: 0,
      },
      {
        name: 'Click Share',
        data: clickShareValues,
        type: 'line',
        yAxisIndex: 1,
      },
      {
        name: 'Conversion Share',
        data: conversionShareValues,
        type: 'line',
        yAxisIndex: 1,
      },
    ],
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        let result = params[0].axisValueLabel + '<br/>';
        params.forEach(param => {
          let value = param.value;
          if (param.seriesName === 'Click Share' || param.seriesName === 'Conversion Share') {
            value = value + '%';
          } else if (param.seriesName === 'Search Frequency Rank') {
            value = value.toLocaleString(); // 使用逗号分隔
          }
          result += param.marker + ' ' + param.seriesName + ': ' + value + '<br/>';
        });
        return result;
      }
    },
    legend: {
      data: ['Search Frequency Rank', 'Click Share', 'Conversion Share'],
    },
  };
  chart.setOption(option);
}

function initChart() {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value);
    updateChart();

    // 创建 ResizeObserver
    resizeObserver = new ResizeObserver(() => {
      chart?.resize();
    });

    // 观察 chartRef 元素
    resizeObserver.observe(chartRef.value);
  }
}
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 300px"></div>
</template>

<style scoped></style>