diff --git a/pages/everdayRenven/AnhuiIndex.vue b/pages/everdayRenven/AnhuiIndex.vue index 40a3090..bad3c8c 100644 --- a/pages/everdayRenven/AnhuiIndex.vue +++ b/pages/everdayRenven/AnhuiIndex.vue @@ -297,6 +297,7 @@ export default { regionProgress: null, tradeType: null, areaProgress: null, + areaColors: ['#FFAC37', '#d8ece9', '#f7f5f6', '#b2b7e3', '#F4B27A', '#F3B1C9', '#e0e3f7', '#FFE886', '#f7f5f6', '#8E44AD', '#3498DB', '#E67E22', '#16A085', '#27AE60', '#2980B9', '#8E44AD', '#2C3E50', '#F39C12', '#D35400', '#C0392B'], bayonetProgress: null, modelProgress: null, isup: true, @@ -408,6 +409,22 @@ export default { } const ctx = uni.createCanvasContext(obj.id, this); data.series = data.series.concat(obj.data) + + // 针对不同图表使用不同配置 + const isAreaChart = obj.id === 'areaCont'; // nowTab为3的图表 + const legendConfig = isAreaChart ? { + show: true, // areaCont显示图例 + padding: 5, + lineHeight: 11, + margin: 10, + position: 'right' // 图例显示在右侧 + } : { + show: false, // 其他图表不显示图例 + padding: 5, + lineHeight: 11, + margin: 0, + }; + rincanvas[obj.id] = new uCharts({ // 小程序图表工具 // $this: this, @@ -416,27 +433,21 @@ export default { color: obj.colors, type: 'ring', fontSize: 12, - padding: [15, 15, 25, 15], - legend: { - show: false, - padding: 5, - lineHeight: 11, - margin: 0, - }, + padding: [15, 25, 25, 15], + legend: legendConfig, background: '#FFFFFF', pixelRatio: 1, series: data.series, animation: false, width: uni.upx2px(686), height: uni.upx2px(510), - dataLabel: true, + dataLabel: !isAreaChart, // areaCont不显示引导线，其他图表显示引导线 extra: { ring: { ringWidth: 40, - labelWidth: 16, + labelWidth: isAreaChart ? 0 : 15, // areaCont为0隐藏引导线，其他图表为15显示引导线 border: true, borderWidth: 1, - borderColor: '#fff' } }, @@ -576,11 +587,10 @@ export default { const [aprogressList, apieList] = this.getProgressData(busniessAreaPie, totalData.cashPay) this.areaProgress = aprogressList // 区域营收分析 - var colors3 = ['#FFAC37', '#d8ece9', '#f7f5f6', '#b2b7e3', '#F4B27A', '#F3B1C9', '#e0e3f7', '#FFE886', '#f7f5f6']; this.showPie({ id: 'areaCont', data: apieList, - colors: colors3, + colors: this.areaColors, }); // 安徽省本级显示的内容 @@ -604,6 +614,7 @@ export default { _data1.push({ ...n, + name: n.name.split('管理单元')[0], textColor: '#999', formatter: function (arg) { @@ -1803,6 +1814,191 @@ canvas.operation-content { background: white; } +/* 图表和图例的容器 - 左右布局 */ +.chart-with-legend { + display: flex; + gap: 20rpx; + align-items: flex-start; +} + +.chart-container-side { + background: #f8f9fa; + border-radius: 16rpx; + padding: 24rpx; + box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04); + border: 1rpx solid rgba(0, 0, 0, 0.04); + flex: 2; + min-width: 0; +} + +.modern-chart-side { + width: 100%; + height: 500rpx; + border-radius: 8rpx; + background: white; +} + +/* 右侧图例容器 */ +.legend-container-right { + flex: 1; + background: #f8f9fa; + border-radius: 16rpx; + padding: 20rpx; + box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04); + border: 1rpx solid rgba(0, 0, 0, 0.04); + height: 500rpx; + display: flex; + flex-direction: column; +} + +.legend-title { + font-size: 26rpx; + font-weight: 600; + color: #2c3e50; + margin-bottom: 20rpx; + padding-bottom: 10rpx; + border-bottom: 1rpx solid #e9ecef; +} + +.legend-items { + flex: 1; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +.legend-item-side { + display: flex; + align-items: center; + padding: 16rpx 0; + margin-bottom: 16rpx; + border-bottom: 1rpx solid #f0f0f0; + transition: all 0.3s ease; +} + +.legend-item-side:last-child { + margin-bottom: 0; + border-bottom: none; +} + +.legend-item-side:hover { + background: rgba(39, 178, 95, 0.05); + transform: translateX(4rpx); +} + +.legend-color-side { + width: 24rpx; + height: 24rpx; + border-radius: 6rpx; + margin-right: 16rpx; + flex-shrink: 0; + border: 2rpx solid #fff; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); +} + +.legend-info-side { + flex: 1; + min-width: 0; +} + +.legend-name-side { + font-size: 24rpx; + font-weight: 600; + color: #2c3e50; + margin-bottom: 6rpx; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.legend-stats-side { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12rpx; +} + +.legend-percentage-side { + font-size: 22rpx; + font-weight: 600; + color: #27B25F; + font-family: 'DIN Alternate', 'Bahnschrift', monospace; +} + +.legend-amount-side { + font-size: 20rpx; + color: #666; + font-family: 'DIN Alternate', 'Bahnschrift', monospace; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 120rpx; + text-align: right; +} + +/* 紧凑版数据卡片 */ +.data-cards-compact { + display: flex; + flex-wrap: wrap; + margin: -4rpx; + margin-top: 16rpx; +} + +.data-card-compact { + background: white; + border-radius: 8rpx; + padding: 12rpx 16rpx; + box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.04); + border: 1rpx solid rgba(0, 0, 0, 0.04); + display: flex; + align-items: center; + gap: 16rpx; + width: calc(50% - 8rpx); + margin: 4rpx; +} + +.category-name-compact { + font-size: 22rpx; + font-weight: 600; + color: #2c3e50; + min-width: 80rpx; +} + +.percentage-compact { + font-size: 20rpx; + font-weight: 600; + color: #27B25F; + font-family: 'DIN Alternate', 'Bahnschrift', monospace; + min-width: 60rpx; + text-align: right; +} + +.amount-compact { + font-size: 22rpx; + font-weight: 700; + color: #27B25F; + font-family: 'DIN Alternate', 'Bahnsicht', monospace; + min-width: 100rpx; + text-align: right; +} + +.progress-bar-compact { + flex: 1; + height: 6rpx; + background-color: #f0f0f0; + border-radius: 3rpx; + overflow: hidden; + min-width: 60rpx; +} + +.progress-fill-compact { + height: 100%; + border-radius: 3rpx; + background: #27B25F; + transition: width 0.6s ease; +} + + + /* 数据卡片布局 - 使用flex替代grid */ .data-cards { display: flex; @@ -1841,7 +2037,7 @@ canvas.operation-content { } .category-name { - font-size: 28rpx; + font-size: 26rpx; font-weight: 600; color: #2c3e50; } @@ -2354,6 +2550,7 @@ canvas.operation-content { font-weight: 600; } + /* 微信小程序兼容性修正 - 移除不支持的特性 */ /* 移除 @media 查询，改用 flex 替代 grid */