ads_web/src/views/adManage/sp/adGroups/chartComponents/adGroup.vue

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

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

defineOptions({name: 'AdGroupChart'})

const shopInfo = useShopInfo()
const metrics = ref([
  {metric: 'Impression', color: 'aqua', 'label': '曝光量'},
  {metric: 'Click', color: 'blue', 'label': '点击量'},
  {metric: 'Spend', color: 'orange', 'label': '花费'},
])
const metricItems: Ref<MetricData[]> = ref([])
let chartObj:any
const chartRef = ref()
const dateRange: string[] = inject('dateRange', [])

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

const getMetricItems = async () => {
	const resp = await getCardData({start: dateRange[0], end: dateRange[1], 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
		}
		metricItems.value.push(tmp)
	})
}
const getDataset = async () => {
	const resp = await getLineData({profile: shopInfo.profile.profile_id, start: dateRange[0], end: dateRange[1]})
	return resp.data
}
const initLine = async () => {
	chartObj = echarts.init(chartRef.value)
	
  const option: any = {
    dataset: {
      source: []
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      selected: {},  // 控制显隐
      show: false
    },
    grid: {
      top: 50, right: 150, bottom: 30, left: 55,
    },
    xAxis: {
      type: 'time'
    },
    yAxis: [],
    series: []
  }

	const items = await getDataset()
	option.dataset.source = items

	
	// chartObj.setOption(option)
}
const changeMetric = () => {

}

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

// defineExpose({resizeChart})
</script>

<style scoped>

</style>