diff --git a/public/dashboard/index.html b/public/dashboard/index.html index e1e39de..f4343f4 100644 --- a/public/dashboard/index.html +++ b/public/dashboard/index.html @@ -319,10 +319,10 @@ $(".hgleft p").eq(3).children("span").text(paramedics.accompany_order) $(".hgleft p").eq(4).children("span").text(paramedicper) // 护工陪护实时概况 - paramedicChart = [ - {value:paramedics.has_accompany , name: '已陪护'}, - {value: paramedics.no_accompany, name: '未陪护'}, - ] + var paramedicChart = [ + {value:paramedics.has_accompany , name: '已陪护'}, + {value: paramedics.no_accompany, name: '未陪护'}, + ] // bed 床位 var beds = datas.bed var bedper = parseFloat(((beds.has_accompany/beds.total)*100).toFixed(2))+"%" @@ -330,22 +330,13 @@ $(".cwleft p").eq(1).children("span").text(beds.has_accompany) $(".cwleft p").eq(2).children("span").text(beds.no_accompany) $(".cwleft p").eq(3).children("span").text(bedper) - // 床位陪护实时概况 - var option1 = { - series: [{ - type: 'pie', - color: ["#04c6c7", "#ffc34a"], - radius: '70%', - data: [ - {value: 855, name: '已陪护'}, - {value: 7795, name: '未陪护'} - ] - }] - }; - var myChart1 = echarts.init(document.getElementById('cw')); - myChart1.setOption(option1); + var bedChart = [ + {value: beds.has_accompany, name: '已陪护'}, + {value: beds.no_accompany, name: '未陪护'} + ] // 陪护统计表 console.log("result",result) + initChart() }, complete: function (xhr, textStatus) { // @@ -423,252 +414,264 @@ speed: 1000, }); - var paramedicChart = [ - {value: 0, name: '已陪护'}, - {value: 0, name: '未陪护'}, - ] - - var option = { - series: [{ - // name:'访问量', - type: 'pie', - color: ["#04c6c7", "#ffc34a"], - radius: '70%', - data: paramedicChart - }] - }; - var myChart = echarts.init(document.getElementById('hg')); - myChart.setOption(option); - // 本月陪护订单分析 - var option2 = { - tooltip: {}, - color: ['#018fff'], - lineStyle: { - color: '#018fff' - }, - legend: { - itemWidth: 18, - itemHeight: 8, - itemGap: 10, - data: ['陪护订单量'], - orient: 'vertical', - left: 'center', - textStyle: { - color: "rgba(255,255,255,.7)", - fontSize: '14px' - } - }, - xAxis: { - type: 'category', - axisLine: { - show: true, - lineStyle: { - color: '#018fff', - } - }, - axisTick: { - show: true, - alignWithLabel: true, + // 图表 + function initChart(){ + // 护工陪护实时概况 + var option = { + series: [{ + // name:'访问量', + type: 'pie', + color: ["#04c6c7", "#ffc34a"], + radius: '70%', + data: paramedicChart + }] + }; + var myChart = echarts.init(document.getElementById('hg')); + myChart.setOption(option); + // 床位陪护实时概况 + var option1 = { + series: [{ + type: 'pie', + color: ["#04c6c7", "#ffc34a"], + radius: '70%', + data: bedChart + }] + }; + var myChart1 = echarts.init(document.getElementById('cw')); + myChart1.setOption(option1); + // 本月陪护订单分析 + var option2 = { + tooltip: {}, + color: ['#018fff'], + lineStyle: { + color: '#018fff' }, - axisLabel: { - interval: 0, + legend: { + itemWidth: 18, + itemHeight: 8, + itemGap: 10, + data: ['陪护订单量'], + orient: 'vertical', + left: 'center', textStyle: { - color: '#fff', + color: "rgba(255,255,255,.7)", fontSize: '14px' } }, - data: ["一院", "市中", "武进南院", "阳湖院", "康复医院", "妇幼院", "武中", "溧阳院"], - }, - yAxis: { - axisLine: { - show: true, - lineStyle: { - color: '#018fff', - } - }, - axisTick: { - show: true, - alignWithLabel: true, + xAxis: { + type: 'category', + axisLine: { + show: true, + lineStyle: { + color: '#018fff', + } + }, + axisTick: { + show: true, + alignWithLabel: true, + }, + axisLabel: { + interval: 0, + textStyle: { + color: '#fff', + fontSize: '14px' + } + }, + data: ["一院", "市中", "武进南院", "阳湖院", "康复医院", "妇幼院", "武中", "溧阳院"], }, - axisLabel: { - interval: 0, - textStyle: { - color: '#fff', + yAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#018fff', + } + }, + axisTick: { + show: true, + alignWithLabel: true, + }, + axisLabel: { + interval: 0, + textStyle: { + color: '#fff', + fontSize: '14px' + } + }, + type: 'value', + name: '订单数', + nameTextStyle: { + color: "#2b7ba0", fontSize: '14px' } }, - type: 'value', - name: '订单数', - nameTextStyle: { - color: "#2b7ba0", - fontSize: '14px' - } - }, - series: [{ - name: '陪护订单量', - type: 'pictorialBar', - barCategoryGap: '40%', - symbol: 'triangle', - itemStyle: { - normal: { - opacity: 0.5 + series: [{ + name: '陪护订单量', + type: 'pictorialBar', + barCategoryGap: '40%', + symbol: 'triangle', + itemStyle: { + normal: { + opacity: 0.5 + }, + emphasis: { + opacity: 1 + } }, - emphasis: { - opacity: 1 - } - }, - data: [336, 150, 42, 156, 42, 30, 54, 45], - }, { - name: '陪护订单量', - type: 'pictorialBar', - barGap: '-100%', - symbolPosition: 'end', - symbolSize: 50, - symbolOffset: [0, '-120%'], - }] - }; - var myChart2 = echarts.init(document.getElementById('byph')); - myChart2.setOption(option2); - // 本月营收占比分析 - var option3 = { + data: [336, 150, 42, 156, 42, 30, 54, 45], + }, { + name: '陪护订单量', + type: 'pictorialBar', + barGap: '-100%', + symbolPosition: 'end', + symbolSize: 50, + symbolOffset: [0, '-120%'], + }] + }; + var myChart2 = echarts.init(document.getElementById('byph')); + myChart2.setOption(option2); + // 本月营收占比分析 + var option3 = { - tooltip: { - trigger: 'item' - }, - series: [ - { - type: 'pie', - radius: '70%', - center: ['50%', '50%'], - color: ["#ffb22f", "#ff4954", "#01babb"], - data: [ - {value: 75, name: '一院'}, - {value: 60, name: '市中'}, - {value: 30, name: '武进南院'}, - {value: 25, name: '阳湖院'}, - {value: 30, name: '康复医院'}, - {value: 20, name: '妇幼院'}, - {value: 25, name: '武中'}, - {value: 18, name: '溧阳院'} - ].sort(function (a, b) { - return a.value - b.value; - }), - roseType: 'radius', - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' + tooltip: { + trigger: 'item' + }, + series: [ + { + type: 'pie', + radius: '70%', + center: ['50%', '50%'], + color: ["#ffb22f", "#ff4954", "#01babb"], + data: [ + {value: 75, name: '一院'}, + {value: 60, name: '市中'}, + {value: 30, name: '武进南院'}, + {value: 25, name: '阳湖院'}, + {value: 30, name: '康复医院'}, + {value: 20, name: '妇幼院'}, + {value: 25, name: '武中'}, + {value: 18, name: '溧阳院'} + ].sort(function (a, b) { + return a.value - b.value; + }), + roseType: 'radius', + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } } } - } - ] - }; - var myChart3 = echarts.init(document.getElementById('ysbox')); - myChart3.setOption(option3); + ] + }; + var myChart3 = echarts.init(document.getElementById('ysbox')); + myChart3.setOption(option3); - // 陪护统计表 - var app = {}; + // 陪护统计表 + var app = {}; - var chartDom = document.getElementById('phtable'); - var myChart4 = echarts.init(chartDom); - var option4; + var chartDom = document.getElementById('phtable'); + var myChart4 = echarts.init(chartDom); + var option4; - option4 = { - color: ['#018fff'], - lineStyle: { - color: '#018fff' - }, - legend: { - itemWidth: 18, - itemHeight: 8, - itemGap: 10, - data: [{ - name: '陪护', - itemStyle: { - color: "#ffb22f", - } - }, { - name: "护工数", - itemStyle: { - color: "#0087ff", - } - }], - orient: 'horizontal', - left: 'center', - textStyle: { - color: "rgba(255,255,255,.7)", - fontSize: '14px' - } - }, - xAxis: { - type: 'category', - data: ['一院', '市中', '武进南院', '阳湖院', '康复医院', '妇幼院', '武中', '溧阳院'], - axisLine: { - show: true, - lineStyle: { - color: '#018fff', - } - }, - axisTick: { - show: true, - alignWithLabel: true, + option4 = { + color: ['#018fff'], + lineStyle: { + color: '#018fff' }, - axisLabel: { - interval: 0, + legend: { + itemWidth: 18, + itemHeight: 8, + itemGap: 10, + data: [{ + name: '陪护', + itemStyle: { + color: "#ffb22f", + } + }, { + name: "护工数", + itemStyle: { + color: "#0087ff", + } + }], + orient: 'horizontal', + left: 'center', textStyle: { - color: '#fff', + color: "rgba(255,255,255,.7)", fontSize: '14px' } - } - }, - yAxis: { - axisLine: { - show: true, - lineStyle: { - color: '#018fff', - } - }, - axisTick: { - show: true, - alignWithLabel: true, }, - axisLabel: { - interval: 0, - textStyle: { - color: '#fff', - fontSize: '14px' + xAxis: { + type: 'category', + data: ['一院', '市中', '武进南院', '阳湖院', '康复医院', '妇幼院', '武中', '溧阳院'], + axisLine: { + show: true, + lineStyle: { + color: '#018fff', + } + }, + axisTick: { + show: true, + alignWithLabel: true, + }, + axisLabel: { + interval: 0, + textStyle: { + color: '#fff', + fontSize: '14px' + } } }, - type: 'value', - name: '人数', - nameTextStyle: { - color: "#2b7ba0", - fontSize: '14px' - } - }, - series: [ - { - type: 'bar', - name: '陪护单数', - data: [336, 150, 42, 156, 42, 30, 54, 45], - itemStyle: { - color: '#ffb22f', + yAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#018fff', + } + }, + axisTick: { + show: true, + alignWithLabel: true, + }, + axisLabel: { + interval: 0, + textStyle: { + color: '#fff', + fontSize: '14px' + } + }, + type: 'value', + name: '人数', + nameTextStyle: { + color: "#2b7ba0", + fontSize: '14px' } }, - { - type: 'bar', - name: '总护工数', - data: [288, 130, 35, 125, 38, 30, 50, 40], - itemStyle: { - color: '#0087ff' + series: [ + { + type: 'bar', + name: '陪护单数', + data: [336, 150, 42, 156, 42, 30, 54, 45], + itemStyle: { + color: '#ffb22f', + } + }, + { + type: 'bar', + name: '总护工数', + data: [288, 130, 35, 125, 38, 30, 50, 40], + itemStyle: { + color: '#0087ff' + } } - } - ], - color: ["#ffb22f", "#0087ff"], - }; - option4 && myChart4.setOption(option4); + ], + color: ["#ffb22f", "#0087ff"], + }; + option4 && myChart4.setOption(option4); + } + +