diff --git a/src/page/index/components/BrandDetail/BrandDetail.vue b/src/page/index/components/BrandDetail/BrandDetail.vue index 625a9a7..4b21cb3 100644 --- a/src/page/index/components/BrandDetail/BrandDetail.vue +++ b/src/page/index/components/BrandDetail/BrandDetail.vue @@ -202,7 +202,7 @@ const handleGetTableData = async (BRAND_INDUSTRY: number) => { const data = await handleGetCombineBrandList(req) // brandListData.value = data.slice(0, 6) - return data.slice(0, 3) + return data.slice(0, 6) } // 切换tab @@ -229,15 +229,15 @@ onBeforeUnmount(() => { const handleSetConfig = (res: any) => { const option = { legend: { - // orient: 'vertical', // 图例纵向排列 - // left: 200, // 距离右侧5% - // top: 'center', // 垂直居中 - itemWidth: 12, // 图例标记宽度 - bottom: 'center', - left: 'center', - itemHeight: 12, // 图例标记高度 + orient: 'horizontal', // 图例横向排列 + bottom: 0, // 距离底部25px,增加与饼图的间隔 + left: 'center', // 水平居中 + itemWidth: 12, // 图例标记宽度 + itemHeight: 12, // 图例标记高度 + itemGap: 25, // 图例之间的间距,增加间隔 textStyle: { - color: '#fff', // 文字颜色 + color: '#fff', // 文字颜色 + fontSize: 12, rich: { // 可以在这里添加富文本样式 value: { @@ -252,8 +252,6 @@ const handleSetConfig = (res: any) => { const dataItem = res.pieData.find((item: any) => item.name === name); // 返回自定义格式 return `${name} ${dataItem?.value}%`; - - } }, tooltip: { // 新增 tooltip 配置 @@ -271,8 +269,8 @@ const handleSetConfig = (res: any) => { { name: 'Access From', type: 'pie', - radius: ['0%', '70%'], - center: ['25%', '50%'], + radius: ['0%', '70%'], // 恢复原来的饼图大小 + center: ['50%', '42%'], // 饼图水平居中,稍微偏上为底部图例留空间 avoidLabelOverlap: false, itemStyle: { color: function (params: any) { diff --git a/src/page/index/components/MemberMall/index.vue b/src/page/index/components/MemberMall/index.vue index f10e8b2..0e5cb9d 100644 --- a/src/page/index/components/MemberMall/index.vue +++ b/src/page/index/components/MemberMall/index.vue @@ -11,8 +11,8 @@ import SmallTitle from '../smallTitle/smallTitle.vue'