Skip to content

P
pica.cloud.web-education-admin
提交 58f4b5cd 编写于 作者: zhentian.jia's avatar zhentian.jia
浏览文件
操作

数据总览UI样式

上级 ad76bdfa
隐藏空白字符变更
内嵌 并排
正在显示 包含 239 行增加 和 69 行删除
src/views/learning/item-data-all.vue
浏览文件 @ 58f4b5cd
...@@ -3,21 +3,20 @@ ...@@ -3,21 +3,20 @@
<div class="box-list"> <div class="box-list">
<div v-for="(item , index) in cardData" :key="index" class="box"> <div v-for="(item , index) in cardData" :key="index" class="box">
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="header"> <el-tooltip class="item-tool" placement="bottom-end" effect="light">
<p class="value">{{ item.value }}</p> <div slot="content">
<p v-for="text in item.content">{{ text }}</p>
</div>
<i class="el-icon-question notice"></i>
</el-tooltip>
<div class="left-content">
<p class="title">{{ item.title }}</p> <p class="title">{{ item.title }}</p>
<el-tooltip class="item" effect="dark" placement="bottom-end"> <p class="value">{{ item.value }}</p>
<div slot="content">
<p v-for="text in item.content">{{ text }}</p>
</div>
<i class="el-icon-question notice"></i>
</el-tooltip>
</div> </div>
<div class="box-content"> <div class="vertical"></div>
<span>{{ item.hasKey }}</span> <div class="right-content">
<span>{{ item.hasNum }}</span> <p class="has">{{ item.hasKey }}:{{ item.hasNum }}</p>
<span class="should-key">{{ item.shouldKey }}</span> <p class="should">{{ item.shouldKey }}:{{ item.shouldNum }}</p>
<span>{{ item.shouldNum }}</span>
</div> </div>
</el-card> </el-card>
<!-- <div v-if="index+1 !== cardData.length" class="line"></div> --> <!-- <div v-if="index+1 !== cardData.length" class="line"></div> -->
...@@ -25,9 +24,20 @@ ...@@ -25,9 +24,20 @@
</div> </div>
<div class="chart-distributeChart"> <div class="chart-distributeChart">
<div class="distributeChart" id="distributeChart" ref="distributeChart"></div> <div class="distributeChart" id="distributeChart" ref="distributeChart"></div>
<div class="data-text"></div> <div class="data-text">
<div class="content-text">
<p v-for="item in distributeList" :key="item.value">{{item.label}}：{{item.value}}人</p>
</div>
</div>
</div>
<div class="chart-recordChart">
<div class="recordChart" id="recordChart" ref="recordChart"></div>
<div class="data-text">
<div class="content-text">
<p v-for="item in recordList" :key="item.value">{{item.label}}：{{item.value}}人</p>
</div>
</div>
</div> </div>
<div class="chart" id="recordChart" ref="recordChart"></div>
<!-- <el-select class="chart-select" v-model="rankType" placeholder="请选择"> <!-- <el-select class="chart-select" v-model="rankType" placeholder="请选择">
<el-option <el-option
v-for="item in rankOptions" v-for="item in rankOptions"
...@@ -35,7 +45,7 @@ ...@@ -35,7 +45,7 @@
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
></el-option> ></el-option>
</el-select> --> </el-select>-->
<div class="chart" id="certificateChart" ref="certificateChart"></div> <div class="chart" id="certificateChart" ref="certificateChart"></div>
<div class="chart" id="durationChart" ref="durationChart"></div> <div class="chart" id="durationChart" ref="durationChart"></div>
</div> </div>
...@@ -72,6 +82,8 @@ export default { ...@@ -72,6 +82,8 @@ export default {
chart2: {}, chart2: {},
chart3: {} chart3: {}
}, },
distributeList: [],
recordList: [],
cardData: [], cardData: [],
rankType: 1, rankType: 1,
rankOptions: [ rankOptions: [
...@@ -153,10 +165,24 @@ export default { ...@@ -153,10 +165,24 @@ export default {
}); });
}, },
setDistributeChart() { setDistributeChart() {
vm.distributeList = [
{
label: '未获证人数',
value: 2290,
},
{
label: '获优秀人数',
value: 1900,
},
{
label: '获及格人数',
value: 150,
},
]
let myChart = echarts.init(this.$refs.distributeChart); let myChart = echarts.init(this.$refs.distributeChart);
let option = { let option = {
title: { title: {
text: "证书分布情况", text: "",
x: "left" x: "left"
}, },
tooltip: { tooltip: {
...@@ -166,9 +192,11 @@ export default { ...@@ -166,9 +192,11 @@ export default {
label: { label: {
formatter: "{d}%" formatter: "{d}%"
}, },
color: ['#FF9A4B','#39AF9A', '#FFB01B'],
legend: { legend: {
orient: "horizontal", orient: "horizontal",
top: "", top: "",
left: "40%",
data: ["未获证人数占比", "获优秀人数占比", "获及格人数占比"] data: ["未获证人数占比", "获优秀人数占比", "获及格人数占比"]
}, },
series: [ series: [
...@@ -176,11 +204,11 @@ export default { ...@@ -176,11 +204,11 @@ export default {
name: "", name: "",
type: "pie", type: "pie",
radius: "60%", radius: "60%",
center: ["50%", "50%"], center: ["65%", "50%"],
data: [ data: [
{ value: 2200, name: "未获证人数占比" }, { value: 3000, name: "未获证人数占比" },
{ value: 1900, name: "获优秀人数占比" }, { value: 6800, name: "获优秀人数占比" },
{ value: 1500, name: "获及格人数占比" } { value: 3200, name: "获及格人数占比" }
], ],
itemStyle: { itemStyle: {
emphasis: { emphasis: {
...@@ -197,18 +225,49 @@ export default { ...@@ -197,18 +225,49 @@ export default {
vm.updateResize(); vm.updateResize();
}, },
setRecordChart() { setRecordChart() {
vm.recordList = [
{
label: '博士',
value: 50,
},
{
label: '硕士',
value: 90,
},
{
label: '本科',
value: 700,
},
{
label: '大专',
value: 20428,
},
{
label: '中专及以下',
value: 34234,
},
{
label: '其他',
value: 2345,
},
]
let myChart = echarts.init(this.$refs.recordChart); let myChart = echarts.init(this.$refs.recordChart);
let option = { let option = {
title: { title: {
text: "证书级别按学历发布情况", text: "",
x: "left" x: "left"
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
// 坐标轴指示器，坐标轴触发有效 // 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow' type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
shadowStyle: {
shadowColor: '#E3EFED',
width: 36,
},
}, },
backgroundColor: 'rgba(0,0,0,0.7)',
formatter: function(params) { formatter: function(params) {
let relVal = params[0].name + "人数："; let relVal = params[0].name + "人数：";
let value = 0; let value = 0;
...@@ -216,9 +275,13 @@ export default { ...@@ -216,9 +275,13 @@ export default {
value += params[i].value; value += params[i].value;
} }
relVal += value + "人"; relVal += value + "人";
for (let j = 0, l = params.length; j < l; j++) { let divList = [];
relVal += divList[0] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
"<br/>" + divList[1] = "<div style='background: #39AF9A;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[2] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
for (let j = params.length - 1 ; j >= 0; j--) {
relVal +=
"<br/>" + divList[j] +
params[j].seriesName + params[j].seriesName +
"占比： " + "占比： " +
( (
...@@ -230,6 +293,7 @@ export default { ...@@ -230,6 +293,7 @@ export default {
return relVal; return relVal;
} }
}, },
color: ['#FFB01B','#39AF9A', '#5D7092'],
legend: { legend: {
data: ["未获证人数", "获优秀人数", "获及格人数"] data: ["未获证人数", "获优秀人数", "获及格人数"]
}, },
...@@ -249,42 +313,44 @@ export default { ...@@ -249,42 +313,44 @@ export default {
}, },
series: [ series: [
{ {
name: "未获证人数", name: "获及格人数",
type: "bar", type: "bar",
stack: "总量", stack: "总量",
barWidth: 30, barWidth: 18,
label: { label: {
normal: { normal: {
show: true, show: true,
position: "insideRight" rotate: -90,
} }
}, },
data: [1, 302, 301, 334, 390, 330] data: [220, 182, 191, 234, 290, 330]
}, },
{ {
name: "获优秀人数", name: "获优秀人数",
type: "bar", type: "bar",
stack: "总量", stack: "总量",
barWidth: 18,
label: { label: {
normal: { normal: {
show: true, show: true,
position: "insideRight" rotate: -90,
} }
}, },
data: [120, 132, 101, 134, 90, 230] data: [120, 132, 101, 134, 90, 230]
}, },
{ {
name: "获及格人数", name: "未获证人数",
type: "bar", type: "bar",
stack: "总量", stack: "总量",
barWidth: 18,
label: { label: {
normal: { normal: {
show: true, show: true,
position: "insideRight" rotate: -90,
} }
}, },
data: [220, 182, 191, 234, 290, 330] data: [1, 302, 301, 334, 390, 330]
} },
] ]
}; };
myChart.setOption(option); myChart.setOption(option);
...@@ -295,7 +361,7 @@ export default { ...@@ -295,7 +361,7 @@ export default {
let myChart = echarts.init(this.$refs.certificateChart); let myChart = echarts.init(this.$refs.certificateChart);
let option = { let option = {
title: { title: {
text: "培训情况排名", text: "",
x: "left" x: "left"
}, },
tooltip: { tooltip: {
...@@ -306,10 +372,15 @@ export default { ...@@ -306,10 +372,15 @@ export default {
color: "#999" color: "#999"
} }
}, },
backgroundColor: 'rgba(0,0,0,0.7)',
formatter: function(params) { formatter: function(params) {
let relVal = ""; let relVal = "";
let divList = [];
divList[0] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[1] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[2] = "<div style='background: #559A99;height: 12px;width: 12px;margin: 5px 5px 0 5px;float: left;border-radius:50%;'></div>";
for (let j = 0, l = params.length; j < l; j++) { for (let j = 0, l = params.length; j < l; j++) {
relVal += params[j].seriesName + "： " + params[j].value; relVal += divList[j] + params[j].seriesName + "： " + params[j].value;
if (j === 2) { if (j === 2) {
relVal += "%"; relVal += "%";
} else { } else {
...@@ -319,13 +390,14 @@ export default { ...@@ -319,13 +390,14 @@ export default {
return relVal; return relVal;
} }
}, },
color: ['#5D7092','#FFB01B', '#559A99'],
dataZoom: { dataZoom: {
show: true, show: true,
start: 0, start: 0,
end: 30 end: 60
}, },
legend: { legend: {
data: ["参与人数", "完成人数", "完成比例"] data: ["参与人数", "获证人数", "获证比例"]
}, },
xAxis: [ xAxis: [
{ {
...@@ -393,6 +465,7 @@ export default { ...@@ -393,6 +465,7 @@ export default {
series: [ series: [
{ {
name: "参与人数", name: "参与人数",
barWidth: 10,
type: "bar", type: "bar",
data: [ data: [
10, 10,
...@@ -432,21 +505,26 @@ export default { ...@@ -432,21 +505,26 @@ export default {
label: { label: {
show: true, show: true,
position: "top", position: "top",
formatter: "{c}" //这是关键，在需要的地方加上就行了 formatter: "{c}", //这是关键，在需要的地方加上就行了
rotate: -90,
offset: [-5, -15]
} }
}, },
{ {
name: "完成人数", name: "获证人数",
barWidth: 10,
type: "bar", type: "bar",
data: [9, 8, 100, 200, 200, 55, 10], data: [9, 8, 100, 200, 200, 55, 10, 9, 8, 100, 200, 200, 55, 10, 9, 8, 100, 200, 200, 55, 10],
label: { label: {
show: true, show: true,
position: "top", position: "top",
formatter: "{c}" //这是关键，在需要的地方加上就行了 formatter: "{c}", //这是关键，在需要的地方加上就行了
rotate: -90,
offset: [-5, -15]
} }
}, },
{ {
name: "完成比例", name: "获证比例",
type: "line", type: "line",
yAxisIndex: 1, yAxisIndex: 1,
data: [ data: [
...@@ -491,7 +569,7 @@ export default { ...@@ -491,7 +569,7 @@ export default {
let myChart = echarts.init(this.$refs.durationChart); let myChart = echarts.init(this.$refs.durationChart);
let option = { let option = {
title: { title: {
text: "在线培训完成时长情况", text: "",
x: "left" x: "left"
}, },
tooltip: { tooltip: {
...@@ -500,6 +578,7 @@ export default { ...@@ -500,6 +578,7 @@ export default {
type: "shadow" // 默认为直线，可选为：'line' | 'shadow' type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
} }
}, },
color: ['#449284'],
grid: { grid: {
left: "3%", left: "3%",
right: "4%", right: "4%",
...@@ -509,13 +588,13 @@ export default { ...@@ -509,13 +588,13 @@ export default {
dataZoom: { dataZoom: {
show: true, show: true,
start: 0, start: 0,
end: 30 end: 66
}, },
xAxis: [ xAxis: [
{ {
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 45 rotate: 35
}, },
type: "category", type: "category",
data: [ data: [
...@@ -566,7 +645,7 @@ export default { ...@@ -566,7 +645,7 @@ export default {
{ {
name: "时长", name: "时长",
type: "bar", type: "bar",
barWidth: "60%", barWidth: 17,
data: [ data: [
10, 10,
52, 52,
...@@ -605,7 +684,9 @@ export default { ...@@ -605,7 +684,9 @@ export default {
label: { label: {
show: true, show: true,
position: "top", position: "top",
formatter: "{c}" //这是关键，在需要的地方加上就行了 formatter: "{c}", //这是关键，在需要的地方加上就行了
rotate: -90,
offset: [-5, -15]
} }
} }
] ]
...@@ -618,48 +699,91 @@ export default { ...@@ -618,48 +699,91 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.el-tooltip__popper.is-light[x-placement^=bottom-end] {
width: 330px;
background-color: #449284;
border-color: #449284;
color: #ffffff;
.popper__arrow::after {
border-bottom-color: #449284;
}
.popper__arrow {
border-bottom-color: #449284;
}
}
.data-all-wrap { .data-all-wrap {
background: #fff; background: #fff;
overflow: hidden; overflow: hidden;
padding: 10px; padding: 10px;
.el-tooltip__popper {
}
.box-list { .box-list {
position: relative; position: relative;
// width: 100%; // width: 100%;
height: 150px; height: 150px;
.box-card { .box-card {
position: relative; position: relative;
background-color: #d8d8d8; background-color: #e3efed;
color: #449284;
width: 31%; width: 31%;
margin-right: 2%; margin-right: 2%;
height: 150px; height: 110px;
float: left; float: left;
.notice {
position: absolute;
z-index: 999;
top: 21px;
right: 14px;
width: 16px;
height: 16px;
}
.el-card__header { .el-card__header {
border-bottom-width: 0; border-bottom-width: 0;
} }
.header { .el-card__body {
padding: 0px;
}
.left-content {
position: relative; position: relative;
float: left;
width: 33%;
height: 110px;
text-align: left; text-align: left;
.value { padding: 23px 0 0 20px;
font-size: 20px;
font-weight: 700;
}
.title { .title {
font-size: 12px; font-size: 14px;
height: 14px;
line-height: 14px;
} }
.notice { .value {
position: absolute; margin-top: 20px;
top: -5px; height: 22px;
right: -5px; font-size: 30px;
line-height: 22px;
font-weight: 500;
} }
} }
.box-content { .vertical {
position: absolute;
left: 34%;
float: left;
margin-top: 23px;
width:1px;
height:57px;
background-color: #C1D8D4;
}
.right-content {
position: relative;
float: left;
width: 64%;
height: 110px;
text-align: left; text-align: left;
height: 15px; font-size: 14px;
font-size: 12px; padding: 23px 0 0 29px;
.should-key { p {
margin-left: 10px; height: 14px;
line-height: 14px;
}
.should {
margin-top: 28px;
} }
} }
} }
...@@ -687,8 +811,54 @@ export default { ...@@ -687,8 +811,54 @@ export default {
.data-text { .data-text {
position: relative; position: relative;
float: left; float: left;
width: 28%; width: 30%;
height: 350px;
.content-text {
position: relative;
margin-top: 135px;
margin-left: 35%;
text-align: left;
p {
margin-top: 20px;
height:12px;
font-size:12px;
font-weight:400;
color:rgba(102,102,102,1);
line-height:12px;
}
}
}
}
.chart-recordChart {
position: relative;
margin: 20px auto 0 auto;
height: 350px;
width: 100%;
.recordChart {
position: relative;
float: left;
width: 83.5%;
height: 350px;
}
.data-text {
position: relative;
float: left;
width: 16%;
height: 350px; height: 350px;
.content-text {
position: relative;
margin-top: 100px;
margin-left: 16%;
text-align: left;
p {
margin-top: 20px;
height:12px;
font-size:12px;
font-weight:400;
color:rgba(102,102,102,1);
line-height:12px;
}
}
} }
} }
} }
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或