diff --git a/src/page/index/components/BusinessStructure/BusinessStructure.vue b/src/page/index/components/BusinessStructure/BusinessStructure.vue index c44a508..7528e8c 100644 --- a/src/page/index/components/BusinessStructure/BusinessStructure.vue +++ b/src/page/index/components/BusinessStructure/BusinessStructure.vue @@ -47,6 +47,14 @@ const handleGoMounted = async () => { myChart = echarts.init(chartDom); + const rect = chartDom.getBoundingClientRect(); + const width = rect.width; + const height = rect.height; + + // 计算center位置(20%,50%)对应的实际像素 + const centerX = width * 0.2; + const centerY = height * 0.5; + const option = { tooltip: { // 新增 tooltip 配置 @@ -69,8 +77,8 @@ const handleGoMounted = async () => { width: 83, height: 83 }, - left: 31, - top: 24, + left: centerX - 41.5, + top: centerY - 41.5, z: 10 } ] diff --git a/src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue b/src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue index e51a9d1..2a697eb 100644 --- a/src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue +++ b/src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue @@ -1,7 +1,7 @@ diff --git a/src/page/index/components/CustomerGroup/CustomerGroup.vue b/src/page/index/components/CustomerGroup/CustomerGroup.vue index 9fac909..1660d2e 100644 --- a/src/page/index/components/CustomerGroup/CustomerGroup.vue +++ b/src/page/index/components/CustomerGroup/CustomerGroup.vue @@ -12,7 +12,7 @@ import { TransformComponent // 如果使用 dataset.source 需要此组件 } from 'echarts/components'; import { CanvasRenderer } from 'echarts/renderers'; -import { onBeforeUnmount, onMounted, watch } from 'vue'; +import { nextTick, onBeforeUnmount, onMounted, onUnmounted, watch } from 'vue'; import { handleGetCustomerGroupRatio } from '../../service'; import moment from 'moment'; @@ -39,6 +39,7 @@ const props = defineProps<{ currentService?: any; }>(); + // 监听传入的选中服务区 watch( () => props.currentService, @@ -188,9 +189,21 @@ const resizeChart = () => { myChart?.resize(); }; +// 重绘所有图表的方法 +const resizeAllCharts = () => { + // 获取当前显示的tab下的所有echarts实例 + const charts = document.querySelectorAll(`#CustomerGroupBoxContent`) + charts.forEach(chart => { + const instance = echarts.getInstanceByDom(chart as HTMLElement) + if (instance) { + instance.resize() + } + }) +} + + onBeforeUnmount(() => { - window.removeEventListener('resize', resizeChart); myChart?.dispose(); }); diff --git a/src/page/index/components/DetailedPayment/DetailedPayment.vue b/src/page/index/components/DetailedPayment/DetailedPayment.vue index 71c18ae..90540d6 100644 --- a/src/page/index/components/DetailedPayment/DetailedPayment.vue +++ b/src/page/index/components/DetailedPayment/DetailedPayment.vue @@ -83,13 +83,10 @@ onMounted(async () => { width: 1, opacity: 0.5 }, - data: res.seriesData, + data: [{ value: res.seriesData }], symbol: 'none', itemStyle: { color: '#0289ED' - }, - areaStyle: { - opacity: 0.1 } } ] @@ -107,7 +104,7 @@ const handleGetSectionFlowCount = async () => { } const data = await handleGetProjectYearlyArrearageList(req) - console.log('datadatadatadatadatadata', data); + console.log('handleGetProjectYearlyArrearageListhandleGetProjectYearlyArrearageListhandleGetProjectYearlyArrearageList', data); let category: any = [] let seriesData: any = [] @@ -123,16 +120,25 @@ const handleGetSectionFlowCount = async () => { if (prent > max) { max = prent } - category.push({ name: item.Account_Name, max: max }) + }) + + list.forEach((item: any) => { + let prent: number = Number(((item.Account_Amount > 0 ? item.Payment_Amount / item.Account_Amount : 0) * 100).toFixed(2)) + + category.push({ name: `${item.Account_Name}(${prent}%)`, max: max }) seriesData.push(prent) // realData.push(item.data) }) } + console.log('dsadjashdudftgsagsdfs', seriesData); + console.log('dsadjashdudftgsagsdfs', category); + let res: any = { category: category,// x轴的内容 seriesData: seriesData,// y轴的数据 - realData: realData// 真实数据 + realData: realData,// 真实数据 + max: max } return res } diff --git a/src/page/index/components/ThisMonthBenefits/ThisMonthBenefits.vue b/src/page/index/components/ThisMonthBenefits/ThisMonthBenefits.vue index 1780902..018c73b 100644 --- a/src/page/index/components/ThisMonthBenefits/ThisMonthBenefits.vue +++ b/src/page/index/components/ThisMonthBenefits/ThisMonthBenefits.vue @@ -42,6 +42,13 @@ onMounted(async () => { const chartDom = document.getElementById('CoreCategory'); if (!chartDom) return; + const rect = chartDom.getBoundingClientRect(); + const width = rect.width; + const height = rect.height; + + // 计算center位置(20%,50%)对应的实际像素 + const centerX = width * 0.2; + const centerY = height * 0.5; myChart = echarts.init(chartDom); @@ -85,8 +92,8 @@ onMounted(async () => { width: 83, height: 83 }, - left: '25', - top: '25', + left: centerX - 41.5, + top: centerY - 41.5, z: 10 } ] diff --git a/src/page/index/index.vue b/src/page/index/index.vue index d764ea5..fe5493a 100644 --- a/src/page/index/index.vue +++ b/src/page/index/index.vue @@ -114,7 +114,7 @@ const handleChangePageTab = (value: number) => { - + @@ -155,6 +155,7 @@ const handleChangePageTab = (value: number) => { + @@ -335,6 +336,7 @@ const handleChangePageTab = (value: number) => { + @@ -414,6 +416,7 @@ const handleChangePageTab = (value: number) => { + @@ -490,6 +493,7 @@ const handleChangePageTab = (value: number) => { +