tao.zhang/tianyi_DataV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

中间部分完毕

Browse Source
This commit is contained in:
MTrunning
2020-03-18 18:01:10 +08:00
parent ae07f9c132
commit b783d1755f
7 changed files with 205 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/scss/style.scss
+3 -3
View File
@@ -63,7 +63,7 @@ a {
} }
.bg-color-black { .bg-color-black {
background-color: rgba(19, 25, 47, .5); background-color: rgba(19, 25, 47, .6);
} }
.bg-color-blue { .bg-color-blue {
@@ -104,10 +104,10 @@ a {
} }
.colorBlue { .colorBlue {
color: #1A5CD7 !important; color: #257dff !important;
&:hover { &:hover {
color: #1A5CD7 !important; color: #257dff !important;
} }
} }
src/components/echart/center/centerChart1.vue
+79
View File
@@ -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>
src/components/echart/center/centerChart2.vue
+79
View File
@@ -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>
src/components/echart/centerChart.vue
-341
View File
@@ -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>
src/views/center.vue
+38 -15
View File
@@ -2,22 +2,31 @@
<div id="center"> <div id="center">
<div class="up"> <div class="up">
<div class="bg-color-black item" v-for="item in titleItem" :key="item.title"> <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> <div>
<dv-digital-flop :config="item.number" style="width:100px;height:50px;" /> <dv-digital-flop :config="item.number" style="width:100px;height:50px;" />
</div> </div>
</div> </div>
</div> </div>
<div class="down"> <div class="down">
<div class="ranking"> <div class="ranking bg-color-black">
<dv-scroll-ranking-board :config="ranking" /> <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>
<div class="percent"> <div class="percent">
<div class="item"> <div class="item bg-color-black">
<centerChart/> <span>今日MR通过率</span>
<centerChart1 />
</div>
<div class="item bg-color-black">
<span>今日MR达标率</span>
<centerChart2 />
</div> </div>
<div class="water"> <div class="water">
<dv-water-level-pond :config="water" style="height: 125px" /> <dv-water-level-pond :config="water" style="height: 120px" />
</div> </div>
</div> </div>
</div> </div>
@@ -25,7 +34,8 @@
</template> </template>
<script> <script>
import centerChart from "@/components/echart/centerChart"; import centerChart1 from "@/components/echart/center/centerChart1";
import centerChart2 from "@/components/echart/center/centerChart2";
export default { export default {
data() { data() {
@@ -120,12 +130,16 @@ export default {
unit: "份" unit: "份"
}, },
water: { water: {
data: [24, 45] data: [24, 45],
shape: 'roundRect',
formatter:'{value}%',
waveNum:3
} }
}; };
}, },
components: { components: {
centerChart centerChart1,
centerChart2
} }
}; };
</script> </script>
@@ -148,22 +162,31 @@ export default {
} }
} }
.down { .down {
padding: 0.5rem; padding: 4px;
padding-bottom: 0px; padding-bottom: 0px;
width: 100%; width: 100%;
display: flex; display: flex;
height: 250px; height: 255px;
justify-content: space-between; justify-content: space-between;
.bg-color-black {
border-radius: 5px;
}
.ranking { .ranking {
width: 58%; padding: 10px;
width: 59%;
} }
.percent { .percent {
width: 40%; width: 40%;
display: flex; display: flex;
flex-direction: column; flex-wrap: wrap;
.item { .item {
width: 100%; width: 50%;
height: 125px; height: 120px;
span {
margin-top: 7px;
display: flex;
justify-content: center;
}
} }
.water { .water {
width: 100%; width: 100%;
src/views/index.vue
+5 -2
View File
@@ -43,7 +43,10 @@
<div class="react-left bg-color-blue mr-3"> <div class="react-left bg-color-blue mr-3">
<span class="text fw-b">构建数据分析</span> <span class="text fw-b">构建数据分析</span>
</div> </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="react-after"></span>
<span class="text">2020年03月16日 周一 12:00</span> <span class="text">2020年03月16日 周一 12:00</span>
</div> </div>
@@ -65,7 +68,7 @@
</div> </div>
<!-- 中间 --> <!-- 中间 -->
<div> <div>
<center/> <center />
</div> </div>
<!-- 中间 --> <!-- 中间 -->
<div> <div>