This commit is contained in:
duanxiaohai
parent
70b20669b0
commit
59c9ddd8c4
|
|
@ -0,0 +1,218 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chart" style="width: 100%;height: calc(100% - 70px)"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from "vue";
|
||||||
|
// 局部引入echarts核心模块
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
const chart = ref(); // 创建DOM引用
|
||||||
|
|
||||||
|
const data = [20, 20, 50, 80, 70, 10, 30];
|
||||||
|
// const lineData = [150, 230, 224, 218, 135, 147, 260];
|
||||||
|
// const max = data
|
||||||
|
// .concat(lineData)
|
||||||
|
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
|
||||||
|
// // 背景颜色
|
||||||
|
const color = [
|
||||||
|
{
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
x2: 0,
|
||||||
|
y: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(17, 193, 255, 1)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: "rgba(17, 193, 255, 0.5)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(17, 193, 255, 0.20)",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
label: {
|
||||||
|
backgroundColor: "#3F82F7", //提示文字标题颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// data: ["上门服务时长", "上门服务次数"],
|
||||||
|
// top: "8%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: "8%",
|
||||||
|
left: "5%",
|
||||||
|
right: "3%",
|
||||||
|
bottom: "0%",
|
||||||
|
containLabel: true,
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
// color: "rgba(0, 252, 255, 1)",
|
||||||
|
color,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
axisLabel: {
|
||||||
|
//坐标轴刻度标签的相关设置
|
||||||
|
textStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false, // 设置轴刻度不显示
|
||||||
|
},
|
||||||
|
data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
show: false,
|
||||||
|
data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
scale: true,
|
||||||
|
// name: "时长/小时",
|
||||||
|
// max: data.length,
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
//坐标轴刻度标签的相关设置
|
||||||
|
textStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
//y轴线的颜色以及宽度
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
width: 1,
|
||||||
|
type: "solid",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: "value",
|
||||||
|
// scale: true,
|
||||||
|
// // name: "次数/次",
|
||||||
|
// min: 0,
|
||||||
|
// max: max,
|
||||||
|
// splitLine: {//分割线配置
|
||||||
|
// show: false,
|
||||||
|
// lineStyle: {
|
||||||
|
// color: "#ffffff",
|
||||||
|
// width: 1,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// axisLabel: {//y轴文字的配置
|
||||||
|
// textStyle: {
|
||||||
|
// color: "#ffffff",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// axisLine: {
|
||||||
|
// //y轴线的颜色以及宽度
|
||||||
|
// show: false,
|
||||||
|
// lineStyle: {
|
||||||
|
// color: "#ffffff",
|
||||||
|
// width: 1,
|
||||||
|
// type: "solid",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// name: "上门服务时长",
|
||||||
|
data: data,
|
||||||
|
barWidth: 20,
|
||||||
|
type: "bar",
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// // name: "上门服务次数",
|
||||||
|
// data: lineData,
|
||||||
|
// type: "line", //线状图
|
||||||
|
// itemStyle: {
|
||||||
|
// borderColor: "#00FCFF",
|
||||||
|
// borderWidth: 1,
|
||||||
|
// color: "#00FCFF",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
xAxisIndex: 1,
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
|
||||||
|
},
|
||||||
|
// data: data.map(() => max),
|
||||||
|
data: data,
|
||||||
|
barWidth: 40, //外阴影背景宽
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
x2: 0,
|
||||||
|
y: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(64, 247, 176, 0.25)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(17, 34, 64, 0.25)",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
type: "bar",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用生命钩子
|
||||||
|
onMounted(() => {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
// var myChart = echarts.init(document.getElementById('main'));
|
||||||
|
// Vue3中： 需要引入
|
||||||
|
var myChart = echarts.init(chart.value);
|
||||||
|
|
||||||
|
// init(); // vue3.2没有this
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
// 单图表响应式: 跟随浏览器大小改变
|
||||||
|
// window.addEventListener("resize", () => {
|
||||||
|
// myChart.resize();
|
||||||
|
// });
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -7,10 +7,9 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="flex1">
|
<div class="flex1">
|
||||||
<div class="yd_title left_2"></div>
|
<div class="yd_title left_2"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="displayFlex">
|
<div class="displayFlex center_bg">
|
||||||
<div class="flex1">
|
<div class="flex1">
|
||||||
<div class="yd_title center_1"></div>
|
<div class="yd_title center_1"></div>
|
||||||
<eGraph></eGraph>
|
<eGraph></eGraph>
|
||||||
|
|
@ -19,20 +18,66 @@
|
||||||
<div class="displayFlex right_bg">
|
<div class="displayFlex right_bg">
|
||||||
<div class="flex1">
|
<div class="flex1">
|
||||||
<div class="yd_title right_1"></div>
|
<div class="yd_title right_1"></div>
|
||||||
<div class="history">
|
<div class="czr-sl">
|
||||||
<p>2002年至2009年担任浙江大学计算机学院和软件学院院长；</p>
|
<div class="historyimg historyimg1">
|
||||||
<p>1984年获得浙江大学计算机应用专业硕士学位，之后留校任教；</p>
|
<span>覆盖医疗机构数量</span>
|
||||||
<p>1990年获得浙江大学计算机应用专业博士学位；</p>
|
<span>22</span>
|
||||||
<p>1994年至1996年担任浙江大学计算机系副系主任；</p>
|
</div>
|
||||||
<p>1997年至2002年担任浙江大学计算机系系主任；</p>
|
<div class="historyimg historyimg2">
|
||||||
<p>2002年至2009年担任浙江大学计算机学院和软件学院院长；</p>
|
<span>启用角色数量</span>
|
||||||
|
<span>101</span>
|
||||||
|
</div>
|
||||||
|
<!-- <img src="@/assets/eduImg/jyImg14.png" alt="" />
|
||||||
|
<img src="@/assets/eduImg/jyImg15.png" alt="" /> -->
|
||||||
|
</div>
|
||||||
|
<edCSR></edCSR>
|
||||||
|
</div>
|
||||||
|
<div class="flex11">
|
||||||
|
<div class="earlyWarning">
|
||||||
|
<div class="earlyWarning1">
|
||||||
|
<div>
|
||||||
|
<span class="green">16</span>
|
||||||
|
</div>
|
||||||
|
<img src="@/assets/eduImg/jyImg10.png" alt="" />
|
||||||
|
<div class="historyimg historyimg1">
|
||||||
|
<span>绿色预警</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="earlyWarning1">
|
||||||
|
<div>
|
||||||
|
<span class="yellow">239</span>
|
||||||
|
</div>
|
||||||
|
<img src="@/assets/eduImg/jyImg9.png" alt="" />
|
||||||
|
<div class="historyimg historyimg2">
|
||||||
|
<span>黄色预警</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="earlyWarning1">
|
||||||
|
<div>
|
||||||
|
<span class="red">139</span>
|
||||||
|
</div>
|
||||||
|
<img src="@/assets/eduImg/jyImg8.png" alt="" />
|
||||||
|
<div class="historyimg historyimg3">
|
||||||
|
<span>红色预警</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex1">
|
<div class="flex1">
|
||||||
<div class="yd_title">
|
<div style="display: flex; justify-content: center">
|
||||||
<span class="text">职位</span>
|
<div class="czr-bj">
|
||||||
|
<div class="czrBox">
|
||||||
|
<div class="situation situation1"></div>
|
||||||
</div>
|
</div>
|
||||||
<eBubble></eBubble>
|
<div class="czrBox">
|
||||||
|
<div class="situation situation2"></div>
|
||||||
|
</div>
|
||||||
|
<div class="czrBox">
|
||||||
|
<div class="situation situation3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <eBubble></eBubble> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -40,6 +85,7 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import eBubble from "./echarts_education/bubble.vue";
|
import eBubble from "./echarts_education/bubble.vue";
|
||||||
|
import edCSR from "./echarts_education/edCSR.vue";
|
||||||
// import ePie from "./echarts/pie.vue";
|
// import ePie from "./echarts/pie.vue";
|
||||||
// import ePie2 from "./echarts/pie2.vue";
|
// import ePie2 from "./echarts/pie2.vue";
|
||||||
// import eGraph from "./echarts/graph.vue";
|
// import eGraph from "./echarts/graph.vue";
|
||||||
|
|
@ -77,6 +123,15 @@ import eBubble from "./echarts_education/bubble.vue";
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
.center_bg {
|
||||||
|
width: 582px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 10px;
|
||||||
|
// margin-right: 28px;
|
||||||
|
background-image: url(@/assets/images/center_bg.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
.right_bg {
|
.right_bg {
|
||||||
width: 642px;
|
width: 642px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -102,7 +157,7 @@ import eBubble from "./echarts_education/bubble.vue";
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.right_1{
|
.right_1 {
|
||||||
background-image: url(@/assets/eduImg/title4.png);
|
background-image: url(@/assets/eduImg/title4.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
|
@ -349,4 +404,184 @@ import eBubble from "./echarts_education/bubble.vue";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.yd_title {
|
||||||
|
// background-image: url(@/assets/img_04.png);
|
||||||
|
// background-repeat: no-repeat;
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 94%;
|
||||||
|
height: 36px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: SourceHanSansCN;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
top: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mechanism {
|
||||||
|
background-image: url(@/assets/YLTitle/titleImg10.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.czr-sl {
|
||||||
|
display: flex;
|
||||||
|
.historyimg {
|
||||||
|
width: 255px;
|
||||||
|
height: 56px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
padding-left: 70px;
|
||||||
|
span {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 22px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.historyimg1 {
|
||||||
|
background-image: url(@/assets/eduImg/jyImg14.png);
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.historyimg2 {
|
||||||
|
background-image: url(@/assets/eduImg/jyImg15.png);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flex11 {
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
.earlyWarning {
|
||||||
|
height: calc(100% - 10px);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
.earlyWarning1 {
|
||||||
|
font-size: 26px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 30px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-family: PangMenZhengDao;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
width: 136px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
.green {
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-family: DINAlternate, DINAlternate;
|
||||||
|
background-image: linear-gradient(180deg, #7be546 0%, #38ffb1 100%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.yellow {
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-family: DINAlternate, DINAlternate;
|
||||||
|
background-image: linear-gradient(180deg, #ee8404 0%, #efd404 100%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.red {
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
font-family: DINAlternate, DINAlternate;
|
||||||
|
background-image: linear-gradient(180deg, #ff3e00 0%, #ed5a2d 100%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.historyimg {
|
||||||
|
width: 133px;
|
||||||
|
height: 19px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
span {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
font-style: normal;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.historyimg1 {
|
||||||
|
background-image: url(@/assets/eduImg/jyImg4.png);
|
||||||
|
}
|
||||||
|
.historyimg2 {
|
||||||
|
background-image: url(@/assets/eduImg/jyImg6.png);
|
||||||
|
}
|
||||||
|
.historyimg3 {
|
||||||
|
background-image: url(@/assets/eduImg/jyImg5.png);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.czr-bj {
|
||||||
|
width: 529px;
|
||||||
|
height: calc(100% - 26px);
|
||||||
|
background: rgba(0, 103, 165, 0.18);
|
||||||
|
box-shadow: inset 0px 0px 58px 0px rgba(37, 175, 252, 0.47);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 20px 0 0 14px;
|
||||||
|
// box-sizing: border-box;
|
||||||
|
|
||||||
|
.czrBox {
|
||||||
|
height: 8vh;
|
||||||
|
}
|
||||||
|
.situation {
|
||||||
|
width: 495px;
|
||||||
|
height: 26px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.situation1 {
|
||||||
|
background-image: url(@/assets/eduImg/jyImg11.png);
|
||||||
|
}
|
||||||
|
.situation2 {
|
||||||
|
background-image: url(@/assets/eduImg/jyImg12.png);
|
||||||
|
}
|
||||||
|
.situation3 {
|
||||||
|
background-image: url(@/assets/eduImg/jyImg13.png);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue