ads_web/src/views/adManage/sp/campaigns/chartComponents/dataTendency.vue

<template>
	<MetricsCards v-model="metrics" :metric-items="metricsItems" @change="changeMetric"></MetricsCards>
  <div style="height: 350px;" ref="chartRef"></div>
</template>

<script lang="ts" setup>
import { ref,onMounted, onBeforeUnmount, Ref, onBeforeMount, watch, computed } from 'vue'
import * as echarts from 'echarts'
import { useShopInfo } from '/@/stores/shopInfo'
import { getLineData, getCardData } from '../api'
import { spCampaignMetricsEnum } from '/@/views/adManage/utils/enum.js'
import MetricsCards from '/@/components/MetricsCards/index.vue'
import XEUtils from 'xe-utils'
import { buildChartOpt } from '/@/views/adManage/utils/tools.js'

defineOptions({
  name: "DataTendencyChart"
})

onBeforeMount(async () => {
	await getMetricsItems()
})
onMounted(() => {
	initLine()
	addResize()
});
onBeforeUnmount(() => {
	if(chartObj) {
		chartObj.dispose()
    chartObj = null
	}
  removeResize()
})

const metrics = ref([
  {metric: 'Impression', color: '#0085ff', 'label': '曝光量'},
  {metric: 'Click', color: '#3fd4cf', 'label': '点击量'},
  {metric: 'Spend', color: '#ff9500', 'label': '花费'},
])
const shopInfo = useShopInfo()
const metricsItems: Ref<MetricData[]> = ref([])
let chartObj:any
const chartRef = ref()
const option: any = {
  dataset: {
    source: []
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    selected: {},  // 控制显隐
    show: false
  },
  grid: {
    top: 50, right: 150, bottom: 30, left: 55,
  },
  xAxis: {
    type: 'category'
  },
  yAxis: [
    {
      id: 0,
      type: 'value',
      name: '曝光量',
      splitLine: {
        show: true // 设置显示分割线
      },
      axisLine: {
        show: true,
				lineStyle: {
					color: '#0085ff'
				}
      },
      show: true
    },
    {
      id: 1,
      type: 'value',
      name: '点击量',
      position: 'right',
      splitLine: {
        show: false
      },
      axisLine: {
        show: true,
				lineStyle: {
					color: '#3fd4cf'
				}
      },
      show: true
    },
    {
      id: 2,
      type: 'value',
      position: 'right',
      offset: 90,
      name: '花费',
      splitLine: {
        show: false
      },
      axisLine: {
        show: true,
				lineStyle: {
					color: '#ff9500'
				}
      },
      show: true
    }
  ],
  series: [
    {
      id: 0,
      name: '曝光量',
      type: 'bar',
      encode: {
        x: 'date',
        y: 'Impression'
      },
      barWidth: '20px',
      yAxisIndex: 0,
      itemStyle: {
        color: '#0085ff',
        borderRadius: [6, 6, 6, 6],
      }
    },
    {
      id: 1,
      name: '点击量',
      type: 'line',
      encode: {
        x: 'date',
        y: 'Click'
      },
      symbolSize: 6,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 1,
      itemStyle: { color: '#3fd4cf', borderColor: '#3fd4cf' },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#3fd4cf53' },
          { offset: 1, color: '#3fd4cf03' },
        ]),
      },
      emphasis: {
        focus:'series'
      }
    },
    {
      id: 2,
      name: '花费',
      type: 'line',
      encode: {
        x: 'date',
        y: 'Spend'
      },
      symbolSize: 6,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 2,
      itemStyle: { color: '#ff9500', borderColor: '#ff9500' },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#ff950053' },
          { offset: 1, color: '#ff950003' },
        ]),
      },
      emphasis: {
        focus:'series'
      }
    }
  ]
}
const getDataset = async () => {
	const resp = await getLineData({profile: shopInfo.profile.profile_id, start: '2023-11-01', end: '2023-11-04'})
	return resp.data
}
const initLine = async () => {
	chartObj = echarts.init(chartRef.value)
	const items = await getDataset()
	option.dataset.source = items
  for(const info of metrics.value) {
    option.legend.selected[info.label] = true
  }
	chartObj.setOption(option)
}

const getMetricsItems = async () => {
	const resp = await getCardData({start: '2023-11-01', end: '2023-11-04', profile: shopInfo.profile.profile_id})
	const data = resp.data
	XEUtils.arrayEach(spCampaignMetricsEnum, info => {
		const tmp:MetricData = {
			label: info.label,
			value: info.value,
			metricVal: data[info.value],
			gapVal: data[`gap${info.value}`],
			preVal: data[`prev${info.value}`],
			disabled: info.initShow ? true : false
		}
		metricsItems.value.push(tmp)
    option.legend.selected[info.label] = false
	})
}

const changeMetric = () => {
  const opt = buildChartOpt(option, metrics.value)
  chartObj.setOption(opt)
}

const resizeChart = () => { chartObj.resize() }
const addResize = () => { window.addEventListener('resize', resizeChart) }
const removeResize = () => { window.removeEventListener('resize', resizeChart) }


defineExpose({resizeChart})

</script>

<style scoped>
.metrics-cards {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
</style>