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

<template>
  <div style="height: 500px;" ref="lineRef"></div>
</template>

<script lang="ts" setup>
import { ref,onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

defineOptions({
  name: "AdStructChart"
})

let chartObj:any
const lineRef = ref()
const resizeChart = () => { chartObj.resize() }
const addResize = () => { window.addEventListener('resize', resizeChart) }
const removeResize = () => { window.removeEventListener('resize', resizeChart) }

onMounted(() => {
	initLine()
	addResize()
});
onBeforeUnmount(() => {
	if(chartObj) {
		chartObj.dispose()
    chartObj = null
	}
	removeResize()
})
const initLine = () => {
	chartObj = echarts.init(lineRef.value)
	const option = {
		xAxis: {
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {},
		series: [
			{
				type: 'bar',
				data: [23, 24, 18, 25, 27, 28, 25]
			}
		]
	}
	chartObj.setOption(option)
}
defineExpose({resizeChart})

</script>

<style scoped>

</style>