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