中间部分完毕
This commit is contained in:
MTrunning
@@ -63,7 +63,7 @@ a {
|
||||
}
|
||||
|
||||
.bg-color-black {
|
||||
background-color: rgba(19, 25, 47, .5);
|
||||
background-color: rgba(19, 25, 47, .6);
|
||||
}
|
||||
|
||||
.bg-color-blue {
|
||||
@@ -104,10 +104,10 @@ a {
|
||||
}
|
||||
|
||||
.colorBlue {
|
||||
color: #1A5CD7 !important;
|
||||
color: #257dff !important;
|
||||
|
||||
&:hover {
|
||||
color: #1A5CD7 !important;
|
||||
color: #257dff !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="centerChart1" style="width:120px;height:100px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const echarts = require("echarts");
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
this.drawPie();
|
||||
},
|
||||
methods: {
|
||||
drawPie() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
let myChartPieLeft = echarts.init(
|
||||
document.getElementById("centerChart1")
|
||||
);
|
||||
// ----------------------------------------------------------------
|
||||
let tips = 60;
|
||||
let option = {
|
||||
title: [
|
||||
{
|
||||
text: tips * 1 + "%",
|
||||
x: "center",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
color: "#3fc0fb",
|
||||
fontSize: 16
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["75%", "80%"],
|
||||
center: ["50%", "50%"],
|
||||
hoverAnimation: false,
|
||||
color: ["#00bcd44a", "transparent"],
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: tips,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#03a9f4",
|
||||
shadowBlur: 10,
|
||||
shadowColor: "#97e2f5"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 100 - tips
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChartPieLeft.setOption(option);
|
||||
// -----------------------------------------------------------------
|
||||
// 响应式变化
|
||||
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
window.onresize = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="centerChart2" style="width:120px;height:100px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const echarts = require("echarts");
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
this.drawPie();
|
||||
},
|
||||
methods: {
|
||||
drawPie() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
let myChartPieLeft = echarts.init(
|
||||
document.getElementById("centerChart2")
|
||||
);
|
||||
// ----------------------------------------------------------------
|
||||
let tips = 40;
|
||||
let option = {
|
||||
title: [
|
||||
{
|
||||
text: tips * 1 + "%",
|
||||
x: "center",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
color: "#67e0e3",
|
||||
fontSize: 16
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["75%", "80%"],
|
||||
center: ["50%", "50%"],
|
||||
hoverAnimation: false,
|
||||
color: ["#f3ffb070", "transparent"],
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: tips,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#ff9800",
|
||||
shadowBlur: 10,
|
||||
shadowColor: "#97e2f5"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 100 - tips
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChartPieLeft.setOption(option);
|
||||
// -----------------------------------------------------------------
|
||||
// 响应式变化
|
||||
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
window.onresize = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,341 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="centreLeft1Chart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const echarts = require("echarts");
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
this.drawPie();
|
||||
},
|
||||
methods: {
|
||||
drawPie(sidebar) {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
let myChartPieLeft = echarts.init(
|
||||
document.getElementById("centreLeft1Chart")
|
||||
);
|
||||
// ----------------------------------------------------------------
|
||||
var value = 83;
|
||||
let option = {
|
||||
backgroundColor: "000",
|
||||
title: {
|
||||
text: `${value}分`,
|
||||
subtext: "综合健康评分",
|
||||
left: "center",
|
||||
top: "center", //top待调整
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 80,
|
||||
fontFamily: "DINAlternate-Bold"
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#ff",
|
||||
fontSize: 35,
|
||||
fontFamily: "PingFangSC-Regular",
|
||||
top: "center"
|
||||
},
|
||||
itemGap: -4 //主副标题间距
|
||||
},
|
||||
xAxis: {
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
// data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
// 内圆
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["0", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
z: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#1147A1"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#423DB3"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#1147A1"
|
||||
}
|
||||
]),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
position: "center"
|
||||
}
|
||||
},
|
||||
data: [100]
|
||||
},
|
||||
// 进度圈
|
||||
{
|
||||
type: "pie",
|
||||
clockWise: true,
|
||||
radius: ["60%", "55%"],
|
||||
data: [
|
||||
{
|
||||
value: value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 10,
|
||||
borderColor: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#7940FE" || "#00cefc" // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#2A69EC" || "#367bec" // 100% 处的颜色
|
||||
}
|
||||
]
|
||||
},
|
||||
color: {
|
||||
// 完成的圆环的颜色
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#7940FE" || "#00cefc" // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#2A69EC" || "#367bec" // 100% 处的颜色
|
||||
}
|
||||
]
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "gap",
|
||||
value: 100 - value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
borderColor: "rgba(0, 0, 0, 0)",
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
//刻度尺
|
||||
{
|
||||
// name: "白色圈刻度",
|
||||
type: "gauge",
|
||||
radius: "67%",
|
||||
startAngle: 225, //刻度起始
|
||||
endAngle: -134.8, //刻度结束
|
||||
z: 4,
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "rgba(1,244,255, 0.9)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
length: 16, //刻度节点线长度
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "rgba(1,244,255, 0.9)"
|
||||
} //刻度节点线
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,0)",
|
||||
fontSize: 12
|
||||
}, //刻度节点文字颜色
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
name: ""
|
||||
}
|
||||
]
|
||||
},
|
||||
// 刻度圈
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["0%", "73%"],
|
||||
center: ["50%", "50%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
fontWeight: "bold"
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0.05,
|
||||
color: "rgba(32,36,107, 0.2)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(32,36,107,0.3)"
|
||||
},
|
||||
{
|
||||
offset: 0.95,
|
||||
color: "rgba(32,36,107, 0.2)"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 3235
|
||||
}
|
||||
]
|
||||
},
|
||||
//最外层圈
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["0%", "85%"],
|
||||
center: ["50%", "50%"],
|
||||
avoidLabelOverlap: false,
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
fontWeight: "bold"
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0.05,
|
||||
color: "rgba(21,24,65, 0.2)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(21,24,65, 0.3)"
|
||||
},
|
||||
{
|
||||
offset: 0.95,
|
||||
color: "rgba(21,24,65, 0.2)"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 3235
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChartPieLeft.setOption(option);
|
||||
// -----------------------------------------------------------------
|
||||
// 响应式变化
|
||||
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
|
||||
//侧边栏变化
|
||||
if (sidebar) {
|
||||
myChartPieLeft.resize();
|
||||
}
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
window.onresize = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
+38
-15
@@ -2,22 +2,31 @@
|
||||
<div id="center">
|
||||
<div class="up">
|
||||
<div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
|
||||
<p class="ml-3 fs-xl">{{item.title}}</p>
|
||||
<p class="ml-3 colorBlue fw-b">{{item.title}}</p>
|
||||
<div>
|
||||
<dv-digital-flop :config="item.number" style="width:100px;height:50px;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="down">
|
||||
<div class="ranking">
|
||||
<dv-scroll-ranking-board :config="ranking" />
|
||||
<div class="ranking bg-color-black">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="align-left"></icon>
|
||||
</span>
|
||||
<span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>
|
||||
<dv-scroll-ranking-board :config="ranking" style="height:220px" />
|
||||
</div>
|
||||
<div class="percent">
|
||||
<div class="item">
|
||||
<centerChart/>
|
||||
<div class="item bg-color-black">
|
||||
<span>今日MR通过率</span>
|
||||
<centerChart1 />
|
||||
</div>
|
||||
<div class="item bg-color-black">
|
||||
<span>今日MR达标率</span>
|
||||
<centerChart2 />
|
||||
</div>
|
||||
<div class="water">
|
||||
<dv-water-level-pond :config="water" style="height: 125px" />
|
||||
<dv-water-level-pond :config="water" style="height: 120px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,7 +34,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import centerChart from "@/components/echart/centerChart";
|
||||
import centerChart1 from "@/components/echart/center/centerChart1";
|
||||
import centerChart2 from "@/components/echart/center/centerChart2";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -120,12 +130,16 @@ export default {
|
||||
unit: "份"
|
||||
},
|
||||
water: {
|
||||
data: [24, 45]
|
||||
data: [24, 45],
|
||||
shape: 'roundRect',
|
||||
formatter:'{value}%',
|
||||
waveNum:3
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
centerChart
|
||||
centerChart1,
|
||||
centerChart2
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -148,22 +162,31 @@ export default {
|
||||
}
|
||||
}
|
||||
.down {
|
||||
padding: 0.5rem;
|
||||
padding: 4px;
|
||||
padding-bottom: 0px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 250px;
|
||||
height: 255px;
|
||||
justify-content: space-between;
|
||||
.bg-color-black {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.ranking {
|
||||
width: 58%;
|
||||
padding: 10px;
|
||||
width: 59%;
|
||||
}
|
||||
.percent {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 125px;
|
||||
width: 50%;
|
||||
height: 120px;
|
||||
span {
|
||||
margin-top: 7px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.water {
|
||||
width: 100%;
|
||||
|
||||
+4
-1
@@ -43,7 +43,10 @@
|
||||
<div class="react-left bg-color-blue mr-3">
|
||||
<span class="text fw-b">构建数据分析</span>
|
||||
</div>
|
||||
<div class="react-left mr-4" style="width: 500px; background-color: #0f1325;">
|
||||
<div
|
||||
class="react-left mr-4"
|
||||
style="width: 500px; background-color: #0f1325; text-align: right;"
|
||||
>
|
||||
<span class="react-after"></span>
|
||||
<span class="text">2020年03月16日 周一 12:00</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user