You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
449 lines
14 KiB
449 lines
14 KiB
2 years ago
|
|
||
|
|
<template>
|
||
|
|
<div class="box">
|
||
|
|
<div class="top-box">
|
||
|
|
<div class="topbox-item">
|
||
|
|
<div class="topbox-item-left">
|
||
|
|
<div class="topbox-itemleft-img"></div> <span>不良反应</span>
|
||
|
|
</div>
|
||
|
|
<div class="topbox-item-content">
|
||
|
|
<div class="topbox-itemleft-color">12121111111111111111</div> <span>例</span>
|
||
|
|
</div>
|
||
|
|
<div class="topbox-item-right">
|
||
|
|
<div>较去年</div> <span class="spanshang">↑</span> <span class="spanxia">↓</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="topbox-item">
|
||
|
|
<div class="topbox-item-left">
|
||
|
|
<div class="topbox-itemleft-img"></div> <span>严重不良反应</span>
|
||
|
|
</div>
|
||
|
|
<div class="topbox-item-content">
|
||
|
|
<div class="topbox-itemleft-color">1212</div> <span>例</span>
|
||
|
|
</div>
|
||
|
|
<div class="topbox-item-right">
|
||
|
|
<div>较去年</div><span class="spanshang">↑</span> <span class="spanxia">↓</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="topbox-item">
|
||
|
|
<div class="topbox-item-left">
|
||
|
|
<div class="topbox-itemleft-img"></div> <span>发生死亡不良反应</span>
|
||
|
|
</div>
|
||
|
|
<div class="topbox-item-content">
|
||
|
|
<div class="topbox-itemleft-color">1212</div> <span>例</span>
|
||
|
|
</div>
|
||
|
|
<div class="topbox-item-right">
|
||
|
|
<div>较去年</div> <span class="spanshang">↑</span> <span class="spanxia">↓</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="bottom-box" ref="bottom-box">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as echarts from "echarts";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: '',
|
||
|
|
components: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
option1: {},
|
||
|
|
// echarts
|
||
|
|
myChart1: {},
|
||
|
|
center: ["18%", "50%"],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() { },
|
||
|
|
mounted() {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
let chartDom = this.$refs["bottom-box"];
|
||
|
|
this.myChart1 = echarts.init(chartDom);
|
||
|
|
this.initEcharts();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initEcharts() {
|
||
|
|
this.option1 = {
|
||
|
|
grid: {
|
||
|
|
left: '10%',
|
||
|
|
top: 0,
|
||
|
|
bottom: 0,
|
||
|
|
right: '60%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
formatter: "{b} : {c} ({d}%)",
|
||
|
|
position: 'right'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
type: "scroll",
|
||
|
|
orient: "vartical",
|
||
|
|
top: "center",
|
||
|
|
right: "20",
|
||
|
|
itemWidth: 10,
|
||
|
|
itemHeight: 8,
|
||
|
|
itemGap: 16,
|
||
|
|
icon: "circle",
|
||
|
|
textStyle: {
|
||
|
|
color: '#A3E2F4',
|
||
|
|
fontSize: 12,
|
||
|
|
fontWeight: 0,
|
||
|
|
rich: {
|
||
|
|
name: {
|
||
|
|
fontSize: 12,
|
||
|
|
padding: [25, 0, 5, 0],//图例位置
|
||
|
|
},
|
||
|
|
percent: {
|
||
|
|
fontSize: 12,
|
||
|
|
color: '#ccc',
|
||
|
|
width: 80, // 设置宽度
|
||
|
|
height: 20, // 设置高度
|
||
|
|
backgroundColor: {
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 1,
|
||
|
|
y2: 0,
|
||
|
|
colorStops: [
|
||
|
|
{ offset: 0, color: 'rgba(36, 64, 97, 1)' }, // 渐变起始色，淡白色
|
||
|
|
{ offset: 1, color: 'rgba(36, 64, 97, 0)' } // 渐变结束色，逐渐透明
|
||
|
|
],
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
data: [{
|
||
|
|
value: 10,
|
||
|
|
name: '一般不良反应'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 5,
|
||
|
|
name: '严重不良反应'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 15,
|
||
|
|
name: '发生死亡不良反应'
|
||
|
|
},
|
||
|
|
|
||
|
|
],
|
||
|
|
formatter: function (name) {
|
||
|
|
let data = [{
|
||
|
|
value: 10,
|
||
|
|
name: '一般不良反应'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 5,
|
||
|
|
name: '严重不良反应'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 15,
|
||
|
|
name: '发生死亡不良反应'
|
||
|
|
},
|
||
|
|
|
||
|
|
]
|
||
|
|
|
||
|
|
// 获取该选项在数据数组中的索引
|
||
|
|
var index = data.findIndex(function (item) {
|
||
|
|
return item.name == name;
|
||
|
|
});
|
||
|
|
|
||
|
|
// 获取该选项的值
|
||
|
|
var value = data[index].value;
|
||
|
|
|
||
|
|
// 计算该选项的百分比
|
||
|
|
var percent = (value / data.reduce(function (sum, item) {
|
||
|
|
return sum + item.value;
|
||
|
|
}, 0) * 100).toFixed(2) + '%';
|
||
|
|
|
||
|
|
// 返回自定义的显示内容
|
||
|
|
return '{name|' + name + '}\n{percent|' + percent + '}';
|
||
|
|
},
|
||
|
|
|
||
|
|
},
|
||
|
|
polar: { center: this.center, color: "#0B3A72", },
|
||
|
|
angleAxis: { center: this.center, color: "#0B3A72", },
|
||
|
|
radiusAxis: {
|
||
|
|
color: "#0B3A72",
|
||
|
|
center: this.center,
|
||
|
|
min: 40,
|
||
|
|
max: 120,
|
||
|
|
interval: 20,
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: "#0B3E5E",
|
||
|
|
width: 1,
|
||
|
|
type: "solid"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value} %',
|
||
|
|
show: false,
|
||
|
|
padding: [0, 0, 20, 0],
|
||
|
|
color: "#0B3E5E",
|
||
|
|
fontSize: 16
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: "#0B3E5E",
|
||
|
|
width: 2,
|
||
|
|
type: "solid"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
calculable: true,
|
||
|
|
series: [{
|
||
|
|
color: "#0B3A72",
|
||
|
|
center: this.center,
|
||
|
|
type: 'pie',
|
||
|
|
radius: ["5%", "10%"],
|
||
|
|
hoverAnimation: false,
|
||
|
|
labelLine: {
|
||
|
|
normal: {
|
||
|
|
show: false,
|
||
|
|
length: 30,
|
||
|
|
length2: 55
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [{
|
||
|
|
name: '',
|
||
|
|
value: 0,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: "#0B3E5E"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}, {
|
||
|
|
center: this.center,
|
||
|
|
type: 'pie',
|
||
|
|
radius: ["100%", "99%"],
|
||
|
|
color: "#0B3A72",
|
||
|
|
hoverAnimation: false,
|
||
|
|
labelLine: {
|
||
|
|
normal: {
|
||
|
|
show: false,
|
||
|
|
length: 30,
|
||
|
|
length2: 55
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
name: "",
|
||
|
|
data: [{
|
||
|
|
name: '',
|
||
|
|
value: 0,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: "#0B3A72"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}, {
|
||
|
|
center: this.center,
|
||
|
|
stack: 'a',
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['20%', '90%'],
|
||
|
|
roseType: 'area',
|
||
|
|
zlevel: 10,
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: false,
|
||
|
|
formatter: "",
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 12,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
normal: {
|
||
|
|
show: false,
|
||
|
|
length: 200,
|
||
|
|
length2: 55
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [{
|
||
|
|
value: 10,
|
||
|
|
name: '一般不良反应'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 5,
|
||
|
|
name: '严重不良反应'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 15,
|
||
|
|
name: '发生死亡不良反应'
|
||
|
|
},
|
||
|
|
|
||
|
|
]
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
|
||
|
|
this.myChart1.setOption(this.option1);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped lang='scss'>
|
||
|
|
.box {}
|
||
|
|
|
||
|
|
.top-box {
|
||
|
|
.topbox-item {
|
||
|
|
&:nth-child(1) {
|
||
|
|
.topbox-itemleft-img {
|
||
|
|
background: url('../../../assets/images/daping/buliang1.png');
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.topbox-itemleft-color {
|
||
|
|
background: linear-gradient(0deg, #FFFFFF 0%, #0373E0 100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(2) {
|
||
|
|
.topbox-itemleft-img {
|
||
|
|
background: url('../../../assets/images/daping/buliang2.png');
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.topbox-itemleft-color {
|
||
|
|
background: linear-gradient(0deg, #FFFFFF 0%, #BF6E35 100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(3) {
|
||
|
|
.topbox-itemleft-img {
|
||
|
|
background: url('../../../assets/images/daping/buliang3.png');
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.topbox-itemleft-color {
|
||
|
|
background: linear-gradient(0deg, #FFFFFF 0%, #F04F50 100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
height: 40px;
|
||
|
|
width: 98%;
|
||
|
|
background: url('../../../assets/images/daping/toushi.png');
|
||
|
|
background-size: contain;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: bottom;
|
||
|
|
|
||
|
|
>div {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.topbox-item-left {
|
||
|
|
margin-left: 20px;
|
||
|
|
flex: 1.9;
|
||
|
|
|
||
|
|
.topbox-itemleft-img {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background-size: contain;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: Alibaba PuHuiTi;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #B7D4F5;
|
||
|
|
line-height: 50px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.topbox-item-content {
|
||
|
|
flex: 1.5;
|
||
|
|
|
||
|
|
|
||
|
|
.topbox-itemleft-color {
|
||
|
|
max-width: 110px;
|
||
|
|
white-space: nowrap;
|
||
|
|
/* 不换行 */
|
||
|
|
overflow: hidden;
|
||
|
|
/* 溢出内容隐藏 */
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
/* 显示省略号 */
|
||
|
|
font-size: 26px;
|
||
|
|
font-family: YouSheBiaoTiHei;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #FFFFFF;
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
font-size: 16px;
|
||
|
|
font-family: Alibaba PuHuiTi;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #B7D4F5;
|
||
|
|
line-height: 50px;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.topbox-item-right {
|
||
|
|
flex: 1;
|
||
|
|
|
||
|
|
div {
|
||
|
|
font-size: 16px;
|
||
|
|
font-family: Alibaba PuHuiTi;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #FFFFFF;
|
||
|
|
background: linear-gradient(0deg, #FFFFFF 0%, #26E0C4 100%);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
margin-right: 5px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
font-size: 16px;
|
||
|
|
font-family: Alibaba PuHuiTi;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spanshang {
|
||
|
|
color: #26E0C4
|
||
|
|
}
|
||
|
|
|
||
|
|
.spanxia {
|
||
|
|
color: #DA1B1B
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom-box {
|
||
|
|
height: 170px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|