fix: 图表功能展示优化。

This commit is contained in:
tianyongbao
2026-01-22 17:49:58 +08:00
parent 3e9be60206
commit b51f92a76f
5 changed files with 245 additions and 51 deletions

View File

@@ -247,9 +247,11 @@
:chartData="chartData"
:opts="lineChartOpts"
:loadingType="1"
:ontouch="true"
:inScrollView="true"
/>
</view>
<!-- 柱状图展示 -->
<view class="chart-container" v-if="hasSecondListData && viewMode === 'column'">
<qiun-data-charts
@@ -258,6 +260,8 @@
:chartData="chartData"
:opts="columnChartOpts"
:loadingType="1"
:ontouch="true"
:inScrollView="true"
/>
</view>
<!-- 列表展示 -->
@@ -368,7 +372,7 @@ const lineChartOpts = computed(() => {
color: ['#667eea'],
padding: [15, 15, 30, 5],
enableScroll: false,
enableMarkLine: true,
enableMarkLine: false,
dataLabel: false,
dataPointShape: true,
legend: {
@@ -412,6 +416,30 @@ const lineChartOpts = computed(() => {
onShadow: true,
animation: true
},
tooltip: {
showBox: true,
showArrow: true,
showCategory: false,
bgColor: '#000000',
bgOpacity: 0.7,
gridType: 'dash',
dashLength: 4,
gridColor: '#CCCCCC',
fontColor: '#FFFFFF',
fontSize: 11,
lineHeight: 16,
borderRadius: 4,
borderWidth: 0,
borderColor: '#000000',
padding: [8, 10, 8, 10],
splitLine: false,
horizentalLine: false,
xAxisLabel: true,
yAxisLabel: true,
labelBgColor: '#000000',
labelBgOpacity: 0.7,
labelFontColor: '#FFFFFF'
},
markLine: {
type: 'dash',
dashLength: 5,
@@ -495,6 +523,30 @@ const columnChartOpts = computed(() => {
barBorderCircle: true,
seriesGap: 2
},
tooltip: {
showBox: true,
showArrow: true,
showCategory: false,
bgColor: '#000000',
bgOpacity: 0.7,
gridType: 'dash',
dashLength: 4,
gridColor: '#CCCCCC',
fontColor: '#FFFFFF',
fontSize: 11,
lineHeight: 16,
borderRadius: 4,
borderWidth: 0,
borderColor: '#000000',
padding: [8, 10, 8, 10],
splitLine: false,
horizentalLine: false,
xAxisLabel: true,
yAxisLabel: true,
labelBgColor: '#000000',
labelBgOpacity: 0.7,
labelFontColor: '#FFFFFF'
},
markLine: {
type: 'dash',
dashLength: 5,
@@ -902,7 +954,7 @@ page {
border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx);
height: 500rpx;
height: 550rpx;
overflow: visible;
position: relative;
}
@@ -1002,7 +1054,7 @@ page {
left: 0;
top: 270rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
z-index: 9999;
.filter-panel-content {
background-color: #ffffff;