|
@@ -3,6 +3,14 @@ import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
import echarts from '@/plugins/echarts'
|
|
import echarts from '@/plugins/echarts'
|
|
|
import 'echarts-gl'
|
|
import 'echarts-gl'
|
|
|
|
|
|
|
|
|
|
+// 公共 tooltip 深色样式,避免白字白底看不见
|
|
|
|
|
+const TOOLTIP_DARK = {
|
|
|
|
|
+ backgroundColor: 'rgba(2, 11, 30, 0.92)',
|
|
|
|
|
+ borderColor: 'rgba(0, 255, 255, 0.3)',
|
|
|
|
|
+ borderWidth: 1,
|
|
|
|
|
+ padding: [8, 12],
|
|
|
|
|
+ textStyle: { color: '#fff' }
|
|
|
|
|
+}
|
|
|
const overview = ref({
|
|
const overview = ref({
|
|
|
totalElderly: 328,
|
|
totalElderly: 328,
|
|
|
bedOccupancy: 89,
|
|
bedOccupancy: 89,
|
|
@@ -56,7 +64,7 @@ const initAdmissionChart = () => {
|
|
|
chartAdmission = echarts.init(admissionRef.value)
|
|
chartAdmission = echarts.init(admissionRef.value)
|
|
|
chartAdmission.setOption({
|
|
chartAdmission.setOption({
|
|
|
backgroundColor: 'transparent',
|
|
backgroundColor: 'transparent',
|
|
|
- tooltip: { trigger: 'axis', textStyle: { color: '#fff' } },
|
|
|
|
|
|
|
+ tooltip: { ...TOOLTIP_DARK, trigger: 'axis' },
|
|
|
legend: {
|
|
legend: {
|
|
|
data: ['新入住', '退住', '累计在院'],
|
|
data: ['新入住', '退住', '累计在院'],
|
|
|
textStyle: { color: '#c7e0ff' },
|
|
textStyle: { color: '#c7e0ff' },
|
|
@@ -141,9 +149,9 @@ const initAgeChart = () => {
|
|
|
chartAge.setOption({
|
|
chartAge.setOption({
|
|
|
backgroundColor: 'transparent',
|
|
backgroundColor: 'transparent',
|
|
|
tooltip: {
|
|
tooltip: {
|
|
|
|
|
+ ...TOOLTIP_DARK,
|
|
|
trigger: 'item',
|
|
trigger: 'item',
|
|
|
- formatter: '{b}<br/>人数:{c}人 ({d}%)',
|
|
|
|
|
- textStyle: { color: '#fff' }
|
|
|
|
|
|
|
+ formatter: '{b}<br/>人数:{c}人 ({d}%)'
|
|
|
},
|
|
},
|
|
|
legend: {
|
|
legend: {
|
|
|
bottom: 0,
|
|
bottom: 0,
|
|
@@ -190,9 +198,9 @@ const initDiseaseChart = () => {
|
|
|
chartDisease.setOption({
|
|
chartDisease.setOption({
|
|
|
backgroundColor: 'transparent',
|
|
backgroundColor: 'transparent',
|
|
|
tooltip: {
|
|
tooltip: {
|
|
|
|
|
+ ...TOOLTIP_DARK,
|
|
|
trigger: 'axis',
|
|
trigger: 'axis',
|
|
|
- axisPointer: { type: 'shadow' },
|
|
|
|
|
- textStyle: { color: '#fff' }
|
|
|
|
|
|
|
+ axisPointer: { type: 'shadow' }
|
|
|
},
|
|
},
|
|
|
grid: { left: 90, right: 30, top: 15, bottom: 20 },
|
|
grid: { left: 90, right: 30, top: 15, bottom: 20 },
|
|
|
xAxis: {
|
|
xAxis: {
|
|
@@ -263,9 +271,9 @@ const initRevenueChart = () => {
|
|
|
chartRevenue.setOption({
|
|
chartRevenue.setOption({
|
|
|
backgroundColor: 'transparent',
|
|
backgroundColor: 'transparent',
|
|
|
tooltip: {
|
|
tooltip: {
|
|
|
|
|
+ ...TOOLTIP_DARK,
|
|
|
trigger: 'axis',
|
|
trigger: 'axis',
|
|
|
- axisPointer: { type: 'cross' },
|
|
|
|
|
- textStyle: { color: '#fff' }
|
|
|
|
|
|
|
+ axisPointer: { type: 'cross' }
|
|
|
},
|
|
},
|
|
|
legend: {
|
|
legend: {
|
|
|
data: ['床位费', '护理费', '餐饮费', '服务费', '其他'],
|
|
data: ['床位费', '护理费', '餐饮费', '服务费', '其他'],
|
|
@@ -374,9 +382,9 @@ const initActivityChart = () => {
|
|
|
chartActivity.setOption({
|
|
chartActivity.setOption({
|
|
|
backgroundColor: 'transparent',
|
|
backgroundColor: 'transparent',
|
|
|
tooltip: {
|
|
tooltip: {
|
|
|
|
|
+ ...TOOLTIP_DARK,
|
|
|
trigger: 'axis',
|
|
trigger: 'axis',
|
|
|
- axisPointer: { type: 'shadow' },
|
|
|
|
|
- textStyle: { color: '#fff' }
|
|
|
|
|
|
|
+ axisPointer: { type: 'shadow' }
|
|
|
},
|
|
},
|
|
|
grid: { left: 60, right: 30, top: 15, bottom: 25 },
|
|
grid: { left: 60, right: 30, top: 15, bottom: 25 },
|
|
|
xAxis: {
|
|
xAxis: {
|
|
@@ -439,7 +447,7 @@ const initCampusChart = () => {
|
|
|
|
|
|
|
|
chartCampus.setOption({
|
|
chartCampus.setOption({
|
|
|
backgroundColor: 'transparent',
|
|
backgroundColor: 'transparent',
|
|
|
- tooltip: {},
|
|
|
|
|
|
|
+ tooltip: { ...TOOLTIP_DARK },
|
|
|
visualMap: {
|
|
visualMap: {
|
|
|
show: false,
|
|
show: false,
|
|
|
min: 20,
|
|
min: 20,
|