提交 44fd8c43 编写于 作者: zhentian.jia's avatar zhentian.jia

UI回测问题解决

上级 0d557844
......@@ -14,9 +14,10 @@ export function dustributeOption(legendData, seriesData) {
},
label: {
// formatter: "{d}%",
// color: '#000000',
formatter:function(data){ return data.percent.toFixed(1)+"%";}
},
color: ['#FF9A4B', '#FFBC3D', '#39AF9A', '#3BA0FF', '#5D7092'],
color: ['#FF9A4B', '#39AF9A', '#FFB01B', '#3BA0FF', '#5D7092'],
legend: {
orient: "horizontal",
top: "",
......@@ -27,9 +28,10 @@ export function dustributeOption(legendData, seriesData) {
{
name: "",
type: "pie",
radius: "60%",
center: ["50%", "50%"],
radius: [0, "78%"],
center: ["50%", "59%"],
data: seriesData,
itemStyle: {
emphasis: {
shadowBlur: 10,
......@@ -66,15 +68,15 @@ export function recordOption(legendData, xAxisData, seriesData) {
}
relVal += value + "人";
let divList = [];
divList[0] = "<div style='background: #3BA0FF;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[1] = "<div style='background: #FF9A4B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
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: #39AF9A;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[2] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[3] = "<div style='background: #39AF9A;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[4] = "<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--) {
divList[3] = "<div style='background: #FF9A4B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[4] = "<div style='background: #3BA0FF;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
for (let j = params.length - 1 , k = 0; j >= 0; j-- , k++) {
if(value != 0) {
relVal +=
"<br/>" + divList[j] +
"<br/>" + divList[k] +
params[j].seriesName +
"占比: " +
(
......@@ -84,7 +86,7 @@ export function recordOption(legendData, xAxisData, seriesData) {
"%";
} else {
relVal +=
"<br/>" + divList[j] +
"<br/>" + divList[k] +
params[j].seriesName +
"占比: "+ "0%";
}
......@@ -94,11 +96,12 @@ export function recordOption(legendData, xAxisData, seriesData) {
},
color: ['#3BA0FF', '#FF9A4B', '#FFB01B', '#39AF9A', '#5D7092'],
legend: {
right: "3%",
data: legendData,
},
grid: {
left: "3%",
right: "4%",
right: "3%",
bottom: "3%",
containLabel: true
},
......@@ -175,11 +178,12 @@ export function certificateOption(xAxisData, seriesJoin, seriesCert, seriesRate,
right:"10%",
},
legend: {
right: '6%',
data: legendData,
},
grid: {
left: 20,
right: 20,
left: '3%',
right: '3%',
containLabel: true
},
xAxis: [
......@@ -377,11 +381,13 @@ export function educationEffect(xAxisData, seriesBefore, seriesAfter) {
},
color: ["#FEBB3C", "#39AF9A"],
legend: {
right: "3%",
data: ["项目前总正确率", "项目后总正确率"]
},
grid: {
top: '20%',
left: "3%",
right: "4%",
right: "3%",
bottom: "3%",
containLabel: true
},
......@@ -399,8 +405,9 @@ export function educationEffect(xAxisData, seriesBefore, seriesAfter) {
min: 0,
max: 100,
type: "value",
name: "正确率 (%)",
axisLabel: {
formatter: "{value} %"
formatter: "{value}%"
},
axisLine: { //隐藏轴线
show: false
......@@ -474,9 +481,11 @@ export function knowledgeEffect(xAxisData, seriesBefore, seriesAfter) {
right:"10%",
},
legend: {
right: 20,
data: ["培训前正确率", "培训后正确率"]
},
grid: {
top: '20%',
left: 20,
right: 20,
containLabel: true
......@@ -499,6 +508,7 @@ export function knowledgeEffect(xAxisData, seriesBefore, seriesAfter) {
min: 0,
max: 100,
type: "value",
name: "正确率 (%)",
axisLine: { //隐藏轴线
show: false
},
......@@ -506,7 +516,7 @@ export function knowledgeEffect(xAxisData, seriesBefore, seriesAfter) {
show: false
},
axisLabel: {
formatter: "{value} %"
formatter: "{value}%"
}
},
series: [
......
......@@ -388,7 +388,7 @@ export function getPicOption(title, legendData, colorData, seriesData) {
legend: {
orient: "vertical",
top: "center",
right: "right",
right: "26",
data: legendData
},
grid: {
......@@ -403,8 +403,8 @@ export function getPicOption(title, legendData, colorData, seriesData) {
{
name: "",
type: "pie",
radius: "55%",
center: ["40%", "55%"],
radius: [0, '55%'],
center: ["50%", "57.2%"],
data: seriesData,
}
]
......@@ -419,16 +419,17 @@ export function getBarOption(xAxisData, seriesData) {
left: '20px',
top: "20px",
},
color: ['#5B8FF9'],
color: ['rgba(91, 143, 249, 0.85)'],
backgroundColor: '#FFFFFF',
tooltip: {
trigger: 'item',
formatter: "{b} : {c} "
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '84',
bottom: '36',
left: '20',
right: '20',
containLabel: true
},
xAxis: [
......@@ -721,6 +722,9 @@ export function getHospitalIdList(data) {
return listArr;
}
export function learnTimeValue(value) {
if(value === null || value === '') {
return '-';
}
let s = parseInt(value),m = 0, h = 0;//秒,分,小时
if(s==NaN){//错误error
return '';
......
<template>
<div class="course-analysis-wrap">
<div class="box-list">
<div v-for="(item , index) in cardData" :key="index" class="box-card" v-bind:class="{ 'box-last': index == 2 }">
<!-- <el-card class="box-card" v-bind:class="{ 'box-last': index == 2 }"> -->
<div class="box-min">
<div v-for="(item , index) in cardData" :key="index" class="box-card" v-bind:class="{ 'box-last': index == 2 }">
<p class="value">{{ item.value }}</p>
<p class="title">{{ item.title }}</p>
<!-- </el-card> -->
</div>
</div>
</div>
<div class="spacing"></div>
......@@ -296,6 +296,12 @@ export default {
position: relative;
height: 120px;
background: #f0f2f5;
overflow-x: auto;
overflow-y: hidden;
.box-min {
height: 120px;
min-width: 950px;
}
.box-card {
position: relative;
background-color: #ffffff;
......
......@@ -291,7 +291,7 @@ export default {
let educationList = data;
let legendData = [];
let seriesData = [];
let colorData = ["#7453FF", "#3BA0FF", "#5D7092", "#39AF9A", "#FFBC3D", "#FF9A4B", "#8A2BE2"];
let colorData = ["#7453FF", "#3BA0FF", "#5D7092", "#39AF9A", "#FFBC3D", "#FF9A4B", "#B87F00"];
for (let i = 0; i < educationList.length; i++) {
legendData[i] = educationList[i].name;
......@@ -319,7 +319,7 @@ export default {
let titleList = data;
let legendData = [];
let seriesData = [];
let colorData = ["#3BA0FF", "#366BCB", "#39AF9A", "#FFBC3D", "#FFBC3D", "#67E0E3", "#8A2BE2"];
let colorData = ["#3BA0FF", "#366BCB", "#39AF9A", "#FFBC3D", "#FFBC3D", "#67E0E3", "#B87F00"];
for (let i = 0; i < titleList.length; i++) {
legendData[i] = titleList[i].name;
seriesData[i] = titleList[i];
......@@ -449,7 +449,7 @@ export default {
}
.sex {
position: relative;
top: 42px;
top: 67px;
left: 0;
.sex-item {
float: left;
......
......@@ -2,7 +2,7 @@
<div class="data-all-wrap">
<div v-if="dataType == 0" class="data-chart">
<div class="box-list">
<!-- <div v-for="(item , index) in cardData" :key="index" class="box"> -->
<div class="box-min">
<div v-for="(item , index) in cardData" :key="index" class="box-card" v-bind:class="{ 'box-last': index == 2 }">
<el-tooltip v-if="index == 2" class="item-tool" placement="bottom-end" effect="light">
<div slot="content">
......@@ -20,7 +20,7 @@
<p class="should">{{ item.shouldKey }}:{{ item.shouldNum | toThousands }}</p>
</div>
</div>
<!-- </div> -->
</div>
</div>
<div class="date-table">
<el-tabs class="change-range" v-model="checkRange" type="card" @tab-click="handleCheckRange">
......@@ -848,6 +848,7 @@ export default {
}
index++;
}
let colorValue = ['#5D7092', '#39AF9A', '#FFB01B', '#FF9A4B', '#3BA0FF'];
for(let z = 0; z < seriesArr.length ; z++) {
let seriesObj = {
name: seriesName[z],
......@@ -860,6 +861,9 @@ export default {
rotate: -90,
}
},
itemStyle: {
color: colorValue[seriesArr.length - z -1],
},
data: seriesArr[z],
};
seriesData.push(seriesObj);
......@@ -1003,11 +1007,14 @@ export default {
}
.box-list {
position: relative;
padding: 30px 30px 0 30px;
height: 136px;
// .box {
// height: 106px;
// }
margin: 30px 30px 0 30px;
height: 120px;
overflow-x: auto;
overflow-y: hidden;
.box-min {
height: 106px;
min-width: 1050px;
}
.box-card {
position: relative;
background-color: #F1F7F6;
......@@ -1178,7 +1185,7 @@ export default {
.distributeChart {
position: relative;
// float: left;
margin: 0 auto;
margin: 0 auto 30px auto;
// width: 70%;
width: 618px;
height: 320px;
......@@ -1186,13 +1193,13 @@ export default {
.data-text {
position: absolute;
top: 0;
right: 0;
width: 30%;
left: 50%;
margin-left: 307px;
height: 320px;
width: 30%;
.content-text {
position: relative;
margin-top: 78px;
margin-left: 35%;
text-align: left;
p {
margin-top: 20px;
......@@ -1225,7 +1232,7 @@ export default {
height: 416px;
.content-text {
position: relative;
margin-top: 100px;
margin-top: 56px;
text-align: left;
p {
margin-top: 20px;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册