update
This commit is contained in:
ylj20011123
parent
e9e165827c
commit
870d96fb3c
@ -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 */
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user