diff --git a/src/api/all/propertyMarketing.ts b/src/api/all/propertyMarketing.ts index 1686f22..4495d02 100644 --- a/src/api/all/propertyMarketing.ts +++ b/src/api/all/propertyMarketing.ts @@ -282,13 +282,13 @@ export const getMediaAccountsAuthorizedStatus = (id: string) => { // 投放账号-趋势 export const getPlacementAccountsTrend = (params = {}) => { - return Http.get(`/v1/placement-accounts/trend`); + return Http.get(`/v1/placement-accounts/trend`, params); }; // 投放账号计划数据-趋势 -export const getPlacementAccountProjectsTrend = (id: string) => { - return Http.get(`/v1/placement-account-projects/trend`); +export const getPlacementAccountProjectsTrend = (params = {}) => { + return Http.get(`/v1/placement-account-projects/trend`, params); }; // 投放指南查询 diff --git a/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue b/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue index 9404752..c4f17da 100644 --- a/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue +++ b/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue @@ -1,5 +1,5 @@ -
+
@@ -19,7 +19,7 @@ import { defineProps, onMounted } from 'vue'; import * as echarts from 'echarts'; import { IconQuestionCircle } from '@arco-design/web-vue/es/icon'; -//子组件参数传递 + const props = defineProps({ title: { type: Object, @@ -43,11 +43,18 @@ let chartInstance: echarts.ECharts | null = null; const xAxisData = props.xAxisData; const seriesData = props.seriesData; +console.log(seriesData, 'seriesData'); const initChart = () => { if (!chart.value) return; + // 如果已有实例,就不重复初始化 + if (chartInstance) { + chartInstance.dispose(chart.value); + } chartInstance = echarts.init(chart.value); + console.log('init'); + const option = { tooltip: { trigger: 'axis', @@ -56,20 +63,6 @@ const initChart = () => { borderColor: '#ccc', borderWidth: 1, textStyle: { color: '#333' }, - formatter: function (params) { - let date = params[0].axisValue; - let tooltipHtml = `
消耗量 ${date}
`; - params.forEach((item) => { - tooltipHtml += ` -
- - ${item.seriesName} - ${item.value} -
- `; - }); - return tooltipHtml; - }, }, legend: { type: 'scroll', @@ -80,7 +73,7 @@ const initChart = () => { pageButtonItemGap: 5, pageButtonStyle: { color: '#666' }, textStyle: { color: '#666' }, - data: seriesData.map((item) => item.name), + data: seriesData, }, grid: { top: 80, // 调整图表内容位置,避免与图例重叠 @@ -104,9 +97,23 @@ const initChart = () => { chartInstance.setOption(option); }; +watch( + () => props.seriesData, + () => { + initChart(); //重新渲染的方法 + }, + { deep: true }, +); + onMounted(() => { initChart(); }); +onBeforeUnmount(() => { + if (chartInstance) { + chartInstance.dispose(); + chartInstance = null; + } +});