qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 图表功能展示优化。

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

72
src/pages/health/statistic/doctorStatistic/index.vue
View File

@@ -267,6 +267,8 @@
:chartData="chartData"
:opts="lineChartOpts"
:loadingType="1"
:ontouch="true"
:inScrollView="true"
/>
</view>
@@ -278,6 +280,8 @@
:chartData="chartData"
:opts="columnChartOpts"
:loadingType="1"
:ontouch="true"
:inScrollView="true"
/>
</view>
@@ -526,7 +530,7 @@ const lineChartOpts = computed(() => {
color: ['#667eea'],
padding: [15, 15, 30, 5],
enableScroll: false,
enableMarkLine: true,
enableMarkLine: false,
dataLabel: false,
dataPointShape: true,
legend: {
@@ -572,6 +576,30 @@ const lineChartOpts = computed(() => {
linearOpacity: 0.2,
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'
}
}
}
@@ -627,6 +655,30 @@ const columnChartOpts = computed(() => {
linearType: 'none',
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'
}
}
}
@@ -1122,7 +1174,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;
@@ -1315,7 +1367,7 @@ page {
border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx);
height: 500rpx;
height: 750rpx;
overflow: visible;
position: relative;
}
@@ -1467,19 +1519,18 @@ page {
.info-row {
display: flex;
flex-wrap: wrap;
gap: 24rpx;
margin-bottom: 0;
margin: 0 -12rpx;
.info-item {
flex: 0 0 calc(50% - 12rpx);
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 4rpx;
min-width: 0;
margin-bottom: -5rpx;
margin-bottom: 20rpx;
&.info-item-full {
flex: 0 0 100%;
width: 100%;
}
.info-label {
@@ -1490,6 +1541,7 @@ page {
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {

58
src/pages/health/statistic/healthStatistic/index.vue
View File

@@ -271,6 +271,8 @@
:chartData="chartData"
:opts="lineChartOpts"
:loadingType="1"
:ontouch="true"
:inScrollView="true"
/>
</view>
@@ -282,6 +284,8 @@
:chartData="chartData"
:opts="columnChartOpts"
:loadingType="1"
:ontouch="true"
:inScrollView="true"
/>
</view>
@@ -416,7 +420,7 @@ const lineChartOpts = computed(() => {
color: ['#667eea'],
padding: [15, 15, 30, 5],
enableScroll: false,
enableMarkLine: true,
enableMarkLine: false,
dataLabel: false,
dataPointShape: true,
legend: {
@@ -461,15 +465,21 @@ const lineChartOpts = computed(() => {
tooltip: {
showBox: true,
showArrow: true,
showCategory: true,
showCategory: false,
bgColor: '#000000',
bgOpacity: 0.7,
gridType: 'dash',
dashLength: 4,
gridColor: '#CCCCCC',
fontColor: '#FFFFFF',
splitLine: true,
horizentalLine: true,
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',
@@ -546,15 +556,21 @@ const columnChartOpts = computed(() => {
tooltip: {
showBox: true,
showArrow: true,
showCategory: true,
showCategory: false,
bgColor: '#000000',
bgOpacity: 0.7,
gridType: 'dash',
dashLength: 4,
gridColor: '#CCCCCC',
fontColor: '#FFFFFF',
splitLine: true,
horizentalLine: true,
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',
@@ -811,6 +827,7 @@ function settingCancel() {
}
</script>
<style lang="scss" scoped>
@@ -1005,11 +1022,16 @@ page {
.filter-panel {
width: 100%;
position: absolute;
position: fixed;
left: 0;
top: 270rpx;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 270rpx;
.filter-panel-content {
background-color: #ffffff;
@@ -1202,7 +1224,7 @@ page {
border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx);
height: 450rpx;
height: 500rpx;
overflow: visible;
position: relative;
}
@@ -1296,19 +1318,18 @@ page {
.info-row {
display: flex;
flex-wrap: wrap;
gap: 24rpx;
margin-bottom: 0;
margin: 0 -12rpx;
.info-item {
flex: 0 0 calc(50% - 12rpx);
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 4rpx;
min-width: 0;
margin-bottom: -5rpx;
margin-bottom: 20rpx;
&.info-item-full {
flex: 0 0 100%;
width: 100%;
}
.info-label {
@@ -1319,6 +1340,7 @@ page {
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {

72
src/pages/health/statistic/marStatistic/index.vue
View File

@@ -365,6 +365,8 @@
:chartData="chartData"
:opts="lineChartOpts"
:loadingType="1"
:ontouch="true"
:inScrollView="true"
/>
</view>
@@ -376,6 +378,8 @@
:chartData="chartData"
:opts="columnChartOpts"
:loadingType="1"
:ontouch="true"
:inScrollView="true"
/>
</view>
@@ -488,7 +492,7 @@ const lineChartOpts = computed(() => {
color: ['#667eea'],
padding: [15, 15, 30, 5],
enableScroll: false,
enableMarkLine: true,
enableMarkLine: false,
dataLabel: false,
dataPointShape: true,
legend: {
@@ -531,6 +535,30 @@ const lineChartOpts = computed(() => {
linearOpacity: 0.2,
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'
}
}
}
@@ -583,6 +611,30 @@ const columnChartOpts = computed(() => {
linearType: 'none',
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'
}
}
}
@@ -996,7 +1048,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;
@@ -1169,7 +1221,7 @@ page {
border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx);
height: 480rpx;
height: 520rpx;
overflow: visible;
position: relative;
}
@@ -1263,19 +1315,18 @@ page {
.info-row {
display: flex;
flex-wrap: wrap;
gap: 24rpx;
margin-bottom: 0;
margin: 0 -12rpx;
.info-item {
flex: 0 0 calc(50% - 12rpx);
width: 50%;
padding: 0 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 4rpx;
min-width: 0;
margin-bottom: -5rpx;
margin-bottom: 20rpx;
&.info-item-full {
flex: 0 0 100%;
width: 100%;
}
.info-label {
@@ -1286,6 +1337,7 @@ page {
padding: 6rpx 12rpx;
border-radius: 8rpx;
align-self: flex-start;
margin-bottom: 8rpx;
}
.info-value {

34
src/pages/health/statistic/milkPowderStatistic/index.vue
View File

@@ -245,6 +245,8 @@
:chartData="chartData"
:opts="lineChartOpts"
:loadingType="1"
:ontouch="true"
:inScrollView="true"
/>
</view>
@@ -256,6 +258,8 @@
:chartData="chartData"
:opts="columnChartOpts"
:loadingType="1"
:ontouch="true"
:inScrollView="true"
/>
</view>
@@ -325,7 +329,7 @@ const lineChartOpts = computed(() => {
color: ['#667eea'],
padding: [15, 15, 30, 5],
enableScroll: false,
enableMarkLine: true,
enableMarkLine: false,
dataLabel: false,
dataPointShape: true,
legend: {
@@ -372,15 +376,21 @@ const lineChartOpts = computed(() => {
tooltip: {
showBox: true,
showArrow: true,
showCategory: true,
showCategory: false,
bgColor: '#000000',
bgOpacity: 0.7,
gridType: 'dash',
dashLength: 4,
gridColor: '#CCCCCC',
fontColor: '#FFFFFF',
splitLine: true,
horizentalLine: true,
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',
@@ -442,15 +452,21 @@ const columnChartOpts = computed(() => {
tooltip: {
showBox: true,
showArrow: true,
showCategory: true,
showCategory: false,
bgColor: '#000000',
bgOpacity: 0.7,
gridType: 'dash',
dashLength: 4,
gridColor: '#CCCCCC',
fontColor: '#FFFFFF',
splitLine: true,
horizentalLine: true,
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',
@@ -890,7 +906,7 @@ page {
border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx);
height: 500rpx;
height: 600rpx;
overflow: visible;
position: relative;
}
@@ -901,7 +917,7 @@ page {
left: 0;
top: 184rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
z-index: 9999;
.filter-panel-content {
background-color: #ffffff;

58
src/pages/health/statistic/temperatureStatistic/index.vue
View File

@@ -247,6 +247,8 @@
:chartData="chartData"
:opts="lineChartOpts"
:loadingType="1"
:ontouch="true"
:inScrollView="true"
/>
</view>
@@ -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;