1080 lines
32 KiB
Vue
1080 lines
32 KiB
Vue
<template>
|
||
<div class="main_box">
|
||
<div class="home_left">
|
||
<!-- 各机构入住率 -->
|
||
<div class="inner_box">
|
||
<div class="inner_header">
|
||
<div class="header_left"></div>
|
||
<div class="header_icon">
|
||
<div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="@/assets/img/bigScreen/polygon1.png"></div>
|
||
<div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="@/assets/img/bigScreen/polygon2.png"></div>
|
||
</div>
|
||
<div class="header_title">
|
||
<div>
|
||
<span>各机构入住率TOP5</span>
|
||
<span class="little_font">（%）</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="left-top1"></div>
|
||
<div class="left-top2"></div>
|
||
</div>
|
||
<InnerBox :echartObj="echartObj1" header_title="本年每月用餐类型统计" little_font="(单)"/>
|
||
<InnerBox :echartObj="echartObj2" header_title="菜品订单量TOP10" little_font="(单)"/>
|
||
</div>
|
||
<div class="home_center" style="display: block">
|
||
<dv-border-box-8 :color="['#053D7E', '#1E6FEA']" style="width: 100%;height: 32%">
|
||
<div class="inner_box" style="width: 100%;height:100%">
|
||
<div class="inner-header"></div>
|
||
<div style="display: flex;justify-content: space-around;width: 100%;height: 100%">
|
||
<div class="header-left">
|
||
<div class="header-left-title"></div>
|
||
<Echarts class="echarts" style="height: 80%" :echartObj="echartObj3" />
|
||
</div>
|
||
<div class="header-right">
|
||
<div class="header-right-title"></div>
|
||
<Echarts class="echarts" style="height: 80%" :echartObj="echartObj4" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</dv-border-box-8>
|
||
<dv-border-box-8 :color="['#00D0FF', '#48E5E5']" style="width: 100%;height: 32%">
|
||
<div class="inner_box" style="width: 100%;height:100%">
|
||
<div class="inner-center"></div>
|
||
<div style="display: flex;justify-content: space-around;width: 100%;height: 100%">
|
||
<div class="center-left">
|
||
<div class="center-left-title"></div>
|
||
<Echarts class="echarts" style="height: 80%" :echartObj="echartObj5" />
|
||
</div>
|
||
<div class="center-right">
|
||
<div class="center-right-title"></div>
|
||
<Echarts class="echarts" style="height: 80%" :echartObj="echartObj6" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</dv-border-box-8>
|
||
<dv-border-box-8 :color="['#053D7E', '#1E6FEA']" style="width: 100%;height: 32%">
|
||
<div class="inner_box" style="width: 100%;height:100%">
|
||
<div class="inner-bottom"></div>
|
||
<div style="display: flex;justify-content: space-around;width: 100%;height: 100%">
|
||
<div class="bottom-left"></div>
|
||
<div class="bottom-right">
|
||
<div class="bottom-right-title"></div>
|
||
<Echarts class="echarts" style="height: 80%" :echartObj="echartObj7" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</dv-border-box-8>
|
||
</div>
|
||
<div class="home_right">
|
||
<div class="inner_box" style="height: 40%">
|
||
<div class="inner_header">
|
||
<div class="header_left"></div>
|
||
<div class="header_icon">
|
||
<div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="@/assets/img/bigScreen/polygon1.png"></div>
|
||
<div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="@/assets/img/bigScreen/polygon2.png"></div>
|
||
</div>
|
||
<div class="header_title">
|
||
<div>
|
||
<span>房间状态统计</span>
|
||
<span class="little_font"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_content">
|
||
<div style="width: 100%;height: 40%;display: flex;justify-content: center;margin-top: 2%">
|
||
<img src="@/assets/img/comprehensive/right-1.png" style="width:20%;max-height: 80%;">
|
||
<div style="height: 100%;width: 60%">
|
||
<Echarts class="echarts" style="height: 90%;" :echartObj="echartObj9" />
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;height: 10%;display: flex;justify-content: space-around">
|
||
<img src="@/assets/img/comprehensive/right2.png" style="width:30%;max-height: 80%;">
|
||
<img src="@/assets/img/comprehensive/right3.png" style="width:60%;max-height: 80%;">
|
||
</div>
|
||
<div style="width: 100%;height: 40%;display: flex;justify-content: space-around;align-items: center;">
|
||
<img src="@/assets/img/comprehensive/right4.png" style="width:25%;max-height: 70%;">
|
||
<img src="@/assets/img/comprehensive/right5.png" style="width:25%;max-height: 60%;">
|
||
<img src="@/assets/img/comprehensive/right6.png" style="width:25%;max-height: 36%;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="right-center"></div>
|
||
<InnerBox :echartObj="echartObj8" style="width: 100%;margin-left: 0" header_title="护理人员能力分析" />
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Vue from 'vue'
|
||
import { Progress,Divider } from 'ant-design-vue';
|
||
Vue.use(Progress);
|
||
Vue.use(Divider);
|
||
import Echarts from "@/components/echarts";
|
||
import echarts from "echarts";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
echartObj1: {
|
||
legend: {
|
||
show: true,
|
||
bottom: 10,
|
||
data: ['套餐(单)','自定义餐(单)','营养餐(单)'],
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
lineHeight: 10
|
||
},
|
||
},
|
||
color: ['#2B8EF3','#F5B12D','#48E5E5'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
data: ['1月','2月','3月','4月','5月','6月'],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {//y轴文字的配置
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: ['#1F7DAF']
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '套餐(单)',
|
||
data: [
|
||
{name: '套餐(单)', value: 210},
|
||
{name: '套餐(单)', value: 140},
|
||
{name: '套餐(单)', value: 130},
|
||
{name: '套餐(单)', value: 130},
|
||
{name: '套餐(单)', value: 130},
|
||
{name: '套餐(单)', value: 130},
|
||
],
|
||
type: 'bar',
|
||
barWidth: 10,
|
||
barGap:0.5,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 10
|
||
},
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: () => {
|
||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#1976E2' },
|
||
{ offset: 1, color: 'rgba(25,118,226,0.30)' },
|
||
]);
|
||
},
|
||
}
|
||
},
|
||
},
|
||
{
|
||
name: '自定义餐(单)',
|
||
data: [
|
||
{name: '自定义餐(单)', value: 180} ,
|
||
{name: '自定义餐(单)', value: 120},
|
||
{name: '自定义餐(单)', value: 48},
|
||
{name: '自定义餐(单)', value: 50},
|
||
{name: '自定义餐(单)', value: 90},
|
||
{name: '自定义餐(单)', value: 120},
|
||
],
|
||
type: 'bar',
|
||
barGap:0.5,
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 10
|
||
},
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: () => {
|
||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#FF7B00' },
|
||
{ offset: 1, color: 'rgba(255,123,0,0.30)' },
|
||
]);
|
||
},
|
||
}
|
||
},
|
||
},
|
||
{
|
||
name: '营养餐(单)',
|
||
data: [
|
||
{name: '营养餐(单)', value: 90} ,
|
||
{name: '自定义餐(单)', value: 170},
|
||
{name: '营养餐(单)', value: 70},
|
||
{name: '营养餐(单)', value: 120},
|
||
{name: '营养餐(单)', value: 180},
|
||
{name: '营养餐(单)', value: 110}
|
||
],
|
||
type: 'bar',
|
||
barGap:0.5,
|
||
barWidth: 10,
|
||
//同一系列的柱间距离
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 12
|
||
},
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: () => {
|
||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#48E5E5' },
|
||
{ offset: 1, color: 'rgba(72,228,229,0.30)' },
|
||
]);
|
||
}
|
||
}
|
||
},
|
||
},
|
||
]
|
||
},
|
||
echartObj2: {
|
||
grid: {
|
||
show: false,
|
||
left: '20',
|
||
top: 20,
|
||
bottom: '20',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
splitLine:{
|
||
show:false
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
splitLine:{
|
||
show:false
|
||
},
|
||
axisLabel: {//y轴文字的配置
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
data: ['水煮鱼','麻婆豆腐','锅包肉','糖醋排骨','红烧鱼','切丁肉末','清炒油麦菜', '蒜蓉娃娃菜','青椒肉丝','西红柿鸡蛋',]
|
||
},
|
||
series: [
|
||
{
|
||
data: [130,60,40,130,100,160,180,190,260,300],
|
||
type: 'bar',
|
||
itemStyle:{
|
||
normal: {
|
||
color: (param)=>{
|
||
if(param.dataIndex % 2 ==0){
|
||
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color:'rgba(255,187,0,0.30)' },
|
||
{ offset: 1, color: '#FFBB00' },
|
||
]);
|
||
}else {
|
||
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color:'rgba(25,118,226,0.30)' },
|
||
{ offset: 1, color: '#1B7EF2' },
|
||
]);
|
||
}
|
||
},
|
||
}
|
||
},
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: 'rgba(180, 180, 180, 0.2)'
|
||
},
|
||
barWidth: 10,
|
||
|
||
}
|
||
]
|
||
},
|
||
echartObj3: {
|
||
legend: {
|
||
show: true,
|
||
top: 'middle',
|
||
right: 0,
|
||
orient: 'vertical',
|
||
data: ['设备','床单','被罩','垃圾袋','洗衣液','消毒液'],
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
lineHeight: 18
|
||
},
|
||
// formatter: (name) => {
|
||
// let data = this.echartObj3.series[0].data
|
||
// let total = 0
|
||
// let tarValue
|
||
// for (let i = 0; i < data.length; i++) {
|
||
// total += data[i].value
|
||
// if (data[i].name == name) {
|
||
// tarValue = data[i].value
|
||
// }
|
||
// }
|
||
// //计算出百分比
|
||
// let p = Math.round((tarValue / total) * 100) + '%'
|
||
// return `${name}${p}`
|
||
// }
|
||
},
|
||
color: ['#2B8EF3','#48E5E5','#3D7DFA','#68A400','#F5B12D','#D599FD'],
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: [60, 90],
|
||
top: 'middle',
|
||
left: -50,
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '{c}%',
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 20,
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: 35, name: '设备' },
|
||
{ value: 15, name: '床单' },
|
||
{ value: 15, name: '被罩' },
|
||
{ value: 11, name: '垃圾袋' },
|
||
{ value: 10, name: '洗衣液' },
|
||
{ value: 9, name: '消毒液' },
|
||
]
|
||
}
|
||
]
|
||
},
|
||
echartObj4: {
|
||
legend: {
|
||
show: true,
|
||
bottom: 10,
|
||
data: ['在库(个)','出库(个)'],
|
||
itemHeight: 8, // 图例高度
|
||
itemWidth: 15, // 图例高度
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
lineHeight: 10,
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
color: ['#2B8EF3','#F5B12D'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
interval: 0, // 强制文字全部显示
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
data: ['设备','床单','被罩','垃圾袋','洗衣液','消毒液'],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {//y轴文字的配置
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: ['#1F7DAF']
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '在库(个)',
|
||
data: [3000,900,2300,5500,4500,4000],
|
||
type: 'bar',
|
||
stack: 'Ad',
|
||
barWidth: 18,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 10
|
||
},
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: () => {
|
||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#1976E2' },
|
||
{ offset: 1, color: 'rgba(25,118,226,0.30)' },
|
||
]);
|
||
},
|
||
}
|
||
},
|
||
},
|
||
{
|
||
name: '出库(个)',
|
||
data: [1000,5000,5500,12000,2500,2000],
|
||
type: 'bar',
|
||
stack: 'Ad',
|
||
barWidth: 18,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 10
|
||
},
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: () => {
|
||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#FFBB00' },
|
||
{ offset: 1, color: '#FF7B00' },
|
||
]);
|
||
},
|
||
}
|
||
},
|
||
}
|
||
]
|
||
},
|
||
echartObj5: {
|
||
legend: {
|
||
show: true,
|
||
top: 'middle',
|
||
right: 0,
|
||
orient: 'vertical',
|
||
data: ['已处理','处理中','未处理'],
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
lineHeight: 18
|
||
},
|
||
// formatter: (name) => {
|
||
// let data = this.echartObj5.series[0].data
|
||
// let total = 0
|
||
// let tarValue
|
||
// for (let i = 0; i < data.length; i++) {
|
||
// total += data[i].value
|
||
// if (data[i].name == name) {
|
||
// tarValue = data[i].value
|
||
// }
|
||
// }
|
||
// //计算出百分比
|
||
// let p = Math.round((tarValue / total) * 100) + '%'
|
||
// return `${name}${p}`
|
||
// }
|
||
},
|
||
color: ['#3D7DFA','#48E5E5','#F5B12D'],
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: [60, 90],
|
||
top: 'middle',
|
||
left: -50,
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '{c}%',
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 20,
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: 35, name: '已处理' },
|
||
{ value: 35, name: '处理中' },
|
||
{ value: 30, name: '未处理' },
|
||
]
|
||
}
|
||
]
|
||
},
|
||
echartObj6: {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {//y轴文字的配置
|
||
textStyle: {
|
||
color: "rgba(255, 255, 255, 0.64)",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: ['#1F7DAF']
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [
|
||
{name: '1月', value: 10 },
|
||
{name: '2月', value: 12 },
|
||
{name: '3月', value: 8 },
|
||
{name: '4月', value: 14 },
|
||
{name: '5月', value: 13 },
|
||
{name: '6月', value: 8 },
|
||
{name: '7月', value: 13 },
|
||
{name: '8月', value: 25 },
|
||
{name: '9月', value: 20 },
|
||
{name: '10月', value: 13 },
|
||
{name: '11月', value: 9 },
|
||
{name: '12月', value: 5 },
|
||
|
||
],
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
barGap:'100%',
|
||
itemStyle: this.setSeriesItemStyle('lan'),
|
||
},
|
||
]
|
||
},
|
||
echartObj7: {
|
||
legend: {
|
||
show: true,
|
||
bottom: 10,
|
||
data: ['用电量(度)','用水量(吨)','用气量(m²)'],
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
lineHeight: 10
|
||
},
|
||
},
|
||
color: ['#2B8EF3','#F5B12D','#48E5E5'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {//y轴文字的配置
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: ['#1F7DAF']
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '用电量(度)',
|
||
data: [
|
||
{name: '用电量(度)', value: 1500},
|
||
{name: '用电量(度)', value: 2400},
|
||
{name: '用电量(度)', value: 2000},
|
||
{name: '用电量(度)', value: 2300},
|
||
{name: '用电量(度)', value: 2450},
|
||
{name: '用电量(度)', value: 1450},
|
||
{name: '用电量(度)', value: 1000},
|
||
{name: '用电量(度)', value: 2500},
|
||
{name: '用电量(度)', value: 1980},
|
||
{name: '用电量(度)', value: 2500},
|
||
{name: '用电量(度)', value: 2300},
|
||
{name: '用电量(度)', value: 1600},
|
||
],
|
||
type: 'bar',
|
||
barWidth: 10,
|
||
barGap:0.5,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 10
|
||
},
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: () => {
|
||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#1976E2' },
|
||
{ offset: 1, color: 'rgba(25,118,226,0.30)' },
|
||
]);
|
||
},
|
||
}
|
||
},
|
||
},
|
||
{
|
||
name: '用水量(吨)',
|
||
data: [
|
||
{name: '用水量(吨)', value: 2200} ,
|
||
{name: '用水量(吨)', value: 1500},
|
||
{name: '用水量(吨)', value: 800},
|
||
{name: '用水量(吨)', value: 1500},
|
||
{name: '用水量(吨)', value: 1900},
|
||
{name: '用水量(吨)', value: 2300},
|
||
{name: '用水量(吨)', value: 1500},
|
||
{name: '用水量(吨)', value: 1500},
|
||
{name: '用水量(吨)', value: 1490},
|
||
{name: '用水量(吨)', value: 1490},
|
||
{name: '用水量(吨)', value: 1500},
|
||
{name: '用水量(吨)', value: 2300},
|
||
],
|
||
type: 'bar',
|
||
barGap:0.5,
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 10
|
||
},
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: () => {
|
||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#FF7B00' },
|
||
{ offset: 1, color: 'rgba(255,123,0,0.30)' },
|
||
]);
|
||
},
|
||
}
|
||
},
|
||
},
|
||
{
|
||
name: '用气量(m²)',
|
||
data: [
|
||
{name: '用气量(m²)', value: 1100} ,
|
||
{name: '用气量(m²)', value: 1150},
|
||
{name: '用气量(m²)', value: 1200},
|
||
{name: '用气量(m²)', value: 1100},
|
||
{name: '用气量(m²)', value: 700},
|
||
{name: '用气量(m²)', value: 1100},
|
||
{name: '用气量(m²)', value: 2400},
|
||
{name: '用气量(m²)', value: 1200},
|
||
{name: '用气量(m²)', value: 1250},
|
||
{name: '用气量(m²)', value: 900},
|
||
{name: '用气量(m²)', value: 1200},
|
||
{name: '用气量(m²)', value: 1150}
|
||
],
|
||
type: 'bar',
|
||
barGap:0.5,
|
||
barWidth: 10,
|
||
//同一系列的柱间距离
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 12
|
||
},
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: () => {
|
||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#48E5E5' },
|
||
{ offset: 1, color: 'rgba(72,228,229,0.30)' },
|
||
]);
|
||
}
|
||
}
|
||
},
|
||
},
|
||
]
|
||
},
|
||
echartObj8: {
|
||
radar: {
|
||
indicator: [
|
||
{ name: '口腔护理', max: 25,},
|
||
{ name: '食物护理', max: 50, axisLabel:{show:false}},
|
||
{ name: '修建', max: 25,axisLabel:{show:false} },
|
||
{ name: '清洗', max: 25,axisLabel:{show:false} },
|
||
{ name: '按摩', max: 25,axisLabel:{show:false}},
|
||
],
|
||
radius: '65%', // 坐标轴半径占可显示区域的比例
|
||
axisLine: { // 坐标轴样式
|
||
lineStyle: {
|
||
color: '#BBBBBB',
|
||
type: 'solid',
|
||
width: 1
|
||
}
|
||
},
|
||
axisTick: { // 氪度线样式
|
||
lineStyle: {
|
||
},
|
||
},
|
||
axisLabel: {// 是否展示坐标数字
|
||
show: true
|
||
},
|
||
splitArea: { // 坐标轴分隔区显示颜色:默认是一深一浅的间隔颜色，这里我们设置间隔之间是空白
|
||
areaStyle: {
|
||
opacity: 0.5,
|
||
color: ['#032750','rgba(25, 118, 226, 0.2)'],
|
||
}
|
||
},
|
||
splitLine: { // 分割线样式
|
||
lineStyle: {
|
||
color: 'rgba(25, 118, 226, 0.2)',
|
||
type: 'solid',
|
||
width: 1
|
||
}
|
||
},
|
||
axisName: { // 指示器样式
|
||
color: '#FFFFFF',
|
||
fontSize: 16
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: 'radar',
|
||
data: [
|
||
{
|
||
value: [12, 25, 3, 12, 20],
|
||
name: 'Allocated Budget'
|
||
},
|
||
],
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient( // 设置渐变色
|
||
0, 0, 0, 1,
|
||
[
|
||
{ offset: 0, color: 'rgba(245,177,45,0.73)' },
|
||
{ offset: 1, color: 'rgba(245,177,45,0.17)' }
|
||
]
|
||
)
|
||
},
|
||
areaStyle: {// 雷达图辐射区域的样式
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1,
|
||
[
|
||
{ offset: 0, color: 'rgba(245,177,45,0.73)' },
|
||
{ offset: 1, color: 'rgba(245,177,45,0.17)' }
|
||
]
|
||
)
|
||
},
|
||
}
|
||
]
|
||
},
|
||
echartObj9: {
|
||
legend: {
|
||
show: true,
|
||
top: 'middle',
|
||
right: 0,
|
||
orient: 'vertical',
|
||
data: ['被罩','洗衣液',],
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
lineHeight: 18
|
||
},
|
||
},
|
||
color: ['#3D7DFA','#F5B12D'],
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: [50, 70],
|
||
top: 'middle',
|
||
left: -50,
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '{c}%',
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 20,
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: 85, name: '被罩' },
|
||
{ value: 15, name: '洗衣液'},
|
||
]
|
||
}
|
||
]
|
||
},
|
||
|
||
}
|
||
},
|
||
created() {
|
||
this.init();
|
||
},
|
||
components: {
|
||
Echarts,
|
||
},
|
||
methods: {
|
||
init() {
|
||
this.getData();
|
||
},
|
||
search() {
|
||
this.init();
|
||
},
|
||
getData() {
|
||
},
|
||
setSeriesItemStyle(color, obj={}){
|
||
let colors = {
|
||
qing: ['#48E5E5', 'rgba(72,228,229,0.30)'],
|
||
lan: ['#2B8EF3', 'rgba(25,118,226,0.30)'],
|
||
// huang: ['#F5B12D', 'rgba(255,123,0,0.30)'],
|
||
huang: ['#FF7B00', 'rgba(255,123,0,0.30)'],
|
||
lv: ['#07F090', 'rgba(60,212,149,0.28)'],
|
||
zi: ['#9B64D3', 'rgba(155,100,211,0.24)'],
|
||
}
|
||
return {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 12
|
||
},
|
||
},
|
||
color: () => {
|
||
return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: colors[color][0] },
|
||
{ offset: 1, color: colors[color][1] },
|
||
]);
|
||
},
|
||
...obj,
|
||
}
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
/deep/ .ant-progress-circle .ant-progress-text {
|
||
color: #FFFFFF;
|
||
font-size: 20px;
|
||
}
|
||
/deep/ .ant-progress-circle-trail{
|
||
stroke:#334D60 !important;
|
||
}
|
||
.main_box{
|
||
padding: 0 2rem;
|
||
> div{
|
||
padding: 0;
|
||
}
|
||
img{
|
||
max-width: 100%;
|
||
}
|
||
.home_center {
|
||
width: 50%;
|
||
padding: 0 10px;
|
||
.inner_box{
|
||
margin-top: 1%;
|
||
}
|
||
.center-left-title{
|
||
background-image: url(../../assets/img/comprehensive/center-center1.png);
|
||
}
|
||
.header-left-title{
|
||
background-image: url(../../assets/img/comprehensive/center-top1.png);
|
||
}
|
||
.center-left-title,
|
||
.header-left-title{
|
||
width: 80%;
|
||
height: 18%;
|
||
margin: 2% auto;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.center-left,
|
||
.header-left{
|
||
width: 38%;
|
||
height: 80%;
|
||
border: 1px solid;
|
||
border-image: linear-gradient(180deg, rgba(31,125,175,0.34) 0%, rgba(31,125,175,0.53) 100%) 1;
|
||
}
|
||
.center-right,
|
||
.header-right{
|
||
width: 59%;
|
||
height: 80%;
|
||
}
|
||
.center-right-title{
|
||
background-image: url(../../assets/img/comprehensive/center-center2.png);
|
||
}
|
||
.header-right-title{
|
||
background-image: url(../../assets/img/comprehensive/center-top2.png);
|
||
}
|
||
.bottom-right-title{
|
||
background-image: url(../../assets/img/comprehensive/center-bottom.png);
|
||
}
|
||
|
||
.bottom-right-title,
|
||
.center-right-title,
|
||
.header-right-title{
|
||
width: 80%;
|
||
height: 16%;
|
||
margin: 2% auto;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.inner-header {
|
||
background-image: url(../../assets/img/comprehensive/top-title.png);
|
||
}
|
||
.inner-center{
|
||
background-image: url(../../assets/img/comprehensive/center-title.png);
|
||
}
|
||
.inner-bottom{
|
||
background-image: url(../../assets/img/comprehensive/bottom-title.png);
|
||
}
|
||
.bottom-left{
|
||
width: 29%;
|
||
height: 85%;
|
||
background-image: url(../../assets/img/comprehensive/bottom-left.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.bottom-right{
|
||
width: 69%;
|
||
height: 80%;
|
||
}
|
||
|
||
.inner-bottom,
|
||
.inner-center,
|
||
.inner-header{
|
||
width: 80%;
|
||
margin: auto;
|
||
height: 60px;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.inner_box{
|
||
overflow: hidden;
|
||
}
|
||
.home_left,
|
||
.home_right{
|
||
width: 25%;
|
||
.right-top{
|
||
width: 100%;
|
||
height: 40%;
|
||
background-image: url(../../assets/img/comprehensive/right.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.right-center{
|
||
width: 100%;
|
||
height: 24%;
|
||
background-image: url(../../assets/img/comprehensive/right1.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.inner_box{
|
||
width: 99%;
|
||
height: 32%;
|
||
margin-left: 1%;
|
||
}
|
||
}
|
||
.home_left{
|
||
.left-top1{
|
||
width: 80%;
|
||
height: 20%;
|
||
margin: auto;
|
||
background-image: url(../../assets/img/comprehensive/left-top1.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.left-top2{
|
||
width: 80%;
|
||
height: 40%;
|
||
margin: auto;
|
||
background-image: url(../../assets/img/comprehensive/left-top2.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|