diff --git a/src/components/body-d-left/bodyLeftHooks.ts b/src/components/body-d-left/bodyLeftHooks.ts index b3a0649..a419b44 100644 --- a/src/components/body-d-left/bodyLeftHooks.ts +++ b/src/components/body-d-left/bodyLeftHooks.ts @@ -82,31 +82,180 @@ export function useSpin() { export const hospitalList = [ { - title: '兴隆医院', - key: 'tangdu', - }, - { - title: '泾河医院', + name: '泾河医院', key: 'zhigong', + value: '', }, { - title: '宁夏宝石花医院', + name: '兴隆医院', + key: 'tangdu', + value: '', + }, + { + name: '宁夏宝石花医院', key: 'yangehu', + value: '', }, { - title: '庆阳医院', - key: 'changan', - }, - { - title: '延安市人民医院', + name: '延安市人民医院', key: 'yananshi', + value: '', }, { - title: '西京医院', + name: '西京医院', key: 'xijing', + value: '', + }, + { + name: '庆阳医院', + key: 'changan', + value: '', }, ]; +export function useHospitalList() { + const radarList = ref(hospitalList); + + function setRadarList(res) { + radarList.value.forEach((item) => { + const { key } = item; + item.value = res[key]; + }); + } + + return { + radarList, + setRadarList, + }; +} + +/** + * @Description:体检医院雷达图 + * @date 2023/6/27 + * @param indicator:名称及最大值 + * @param countList:数据项 + */ +export const radarCharts = ({ indicator, countList }) => { + return { + // tooltip: { + // backgroundColor: 'rgba(50,50,50,0.7)', + // borderColor: 'rgba(50,50,50,0.7)', + // textStyle: { + // color: '#fff', + // }, + // //雷达图的tooltip不会超出div,也可以设置position属性,position定位的tooltip 不会随着鼠标移动而位置变化,不友好 + // confine: true, + // enterable: true, //鼠标是否可以移动到tooltip区域内 + // valueFormatter: (params) => {}, + // }, + grid: { + top: '1%', + left: '5%', + right: '5%', + bottom: '1%', + containLabel: true, + }, + radar: { + name: { + textStyle: { + color: '#fff', + fontSize: 14, + }, + }, + shape: 'polygon', + center: ['50%', '50%'], + radius: '65%', + //坐标系起始角度,也就是第一个指示器轴的角度。 + startAngle: 360, + scale: true, + axisLine: { + lineStyle: { + color: '#597589', + }, + }, + splitLine: { + show: true, + lineStyle: { + width: 1, + color: '#597589', // 设置网格的颜色 + }, + }, + indicator: indicator, + splitArea: { + show: false, + }, + axisName: { + formatter: function (params) { + let dataIndex = indicator.findIndex((item) => item.name === params); + return `${params}\n${countList[dataIndex]}`; + }, + color: '#ffffff', + }, + }, + polar: { + center: ['50%', '50%'], // 默认全局居中 + radius: '0%', + }, + angleAxis: { + min: 0, + interval: 5, + clockwise: false, + axisTick: { + show: false, + }, + axisLabel: { + show: false, + }, + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + }, + radiusAxis: { + min: 0, + interval: 20, + splitLine: { + show: false, + }, + }, + series: [ + { + name: '本年度健康体检', + type: 'radar', + symbol: 'circle', // 拐点的样式,还可以取值'rect','angle'等 + symbolSize: 10, // 拐点的大小 + itemStyle: { + normal: { + color: '#05D5FF', + }, + }, + areaStyle: { + normal: { + color: '#05D5FF', + opacity: 0.5, + }, + }, + lineStyle: { + width: 2, + color: '#05D5FF', + }, + label: { + normal: { + show: false, + }, + }, + data: [ + { + value: countList, + }, + ], + }, + ], + }; +}; + export function barOption(xData, ydata) { function maxCount() { if (ydata.length) { diff --git a/src/components/body-d-left/threeL.vue b/src/components/body-d-left/threeL.vue index 4946c31..34d3beb 100644 --- a/src/components/body-d-left/threeL.vue +++ b/src/components/body-d-left/threeL.vue @@ -4,30 +4,32 @@
{{ item.name }}
-
-
-
{{ countData[item.key] || '/' }}
-
{{ item.title }}
-
-
+
+ + + + + +
- - + \ No newline at end of file diff --git a/src/components/chinaMap/chinaHooks.ts b/src/components/chinaMap/chinaHooks.ts index 379a85c..5264269 100644 --- a/src/components/chinaMap/chinaHooks.ts +++ b/src/components/chinaMap/chinaHooks.ts @@ -133,7 +133,7 @@ export const legendList = [ { img: legend3, text: '救护车' }, { img: legend4, text: '合作医院' }, { img: legend5, text: '地方医院' }, - { img: legend6, text: '直升机' }, + // { img: legend6, text: '直升机' }, ]; /**