提交 17d4f145 编写于 作者: guangjun.yang's avatar guangjun.yang

学习效果分析中的样式问题

上级 ad6d48e1
......@@ -39,13 +39,14 @@ export default {
handler(newVal) {
let yAxisData = [], series0Data = [], series1Data = []
yAxisData = newVal.map( item => {
return item.classifyName
return item.classifyName;
// return (item.classifyName || 0).toFixed(0) * 100 + '%'
})
series0Data = this.dataList.map( item => {
return item.beforeRate
return ((item.beforeRate|| 0) * 100).toFixed(0);
})
series1Data = this.dataList.map( item => {
return item.afterRate
return ((item.afterRate|| 0) * 100).toFixed(0);
})
this.drawColumn(yAxisData.splice(0, 5), series0Data.splice(0, 5), series1Data.splice(0, 5));
},
......@@ -78,7 +79,8 @@ export default {
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
}
},
formatter: '{b}<br/>{a0}: {c0}%<br/>{a1}: {c1}%'
},
legend: {
top: 20,
......@@ -99,10 +101,11 @@ export default {
color: "#676869"
},
xAxis: {
max: 100,
axisTick: false,
type: "value",
axisLabel: {
formatter: "{value}",
formatter: "{value}%",
textStyle: {
color: "#676869"
}
......@@ -144,14 +147,28 @@ export default {
data: series0Data,
// data: [12, 200, 150, 80, 70, 110, 130],
type: "bar",
barWidth: 15 //柱图宽度
barWidth: 15, //柱图宽度
label: {
normal: {
formatter: "{c}%",
show: false,
position: "inside"
}
}
},
{
name: "培训后正确率",
data: series1Data,
// data: [120, 20, 160, 80, 70, 110, 130],
type: "bar",
barWidth: 15 //柱图宽度
barWidth: 15, //柱图宽度
label: {
normal: {
formatter: "{c}%",
show: false,
position: "inside"
}
}
}
]
};
......
......@@ -46,16 +46,15 @@ export default {
watch: {
dataList: {
handler(newVal) {
let yAxisData = [], series0Data = [], series1Data = []
yAxisData = newVal.map( item => {
return item.classifyName
})
series0Data = this.dataList.map( item => {
return item.beforeRate
return ((item.beforeRate|| 0) * 100).toFixed(0);
})
series1Data = this.dataList.map( item => {
return item.afterRate
return ((item.afterRate|| 0) * 100).toFixed(0);
})
this.drawColumn(yAxisData.splice(0, 5), series0Data.splice(0, 5), series1Data.splice(0, 5));
},
......@@ -79,7 +78,9 @@ export default {
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
}
},
// formatter: '{a}<br/>{b}<br/>{c}<br/>{a0}<br/>{a1}<br/>{b0}<br/>{b1}',
formatter: '{b}<br/>{a0}: {c0}%<br/> {a1}: {c1}%'
},
legend: {
top: 20,
......@@ -103,7 +104,7 @@ export default {
axisTick: false,
type: "value",
axisLabel: {
formatter: "{value}",
formatter: "{value}%",
textStyle: {
color: "#676869"
}
......
<!-- 人员学历情况饼图 -->
<template>
<section class="chart-pie-edu">
<div :id="pieId" :style="{width: '360px', height: '220px'}"></div>
<div :id="pieId" :style="{width: chartWidth, height: '220px'}"></div>
</section>
</template>
<script>
......@@ -23,6 +23,7 @@ export default {
},
data() {
return {
chartWidth: '300px',
pieId: 'eduPieId',
chartHeight: "1000px",
handledData: {},
......@@ -34,6 +35,14 @@ export default {
watch: {
dataList: {
handler(newValue, oldValue) {
if (process.client) {
let clientWidth =
window.outerWidth ||
document.body.clientWidth ||
document.documentElement.clientWidth;
this.chartWidth = Math.ceil(clientWidth * 0.90) + 'px';
console.log('this.chartWidth', this.chartWidth);
}
this.handlePieData(newValue);
this.drawPie();
},
......
<!-- 人员职称情况饼图 -->
<template>
<section class="chart-pie">
<div :id="pieId" :style="{width: '360px', height: '220px'}"></div>
<div :id="pieId" :style="{width: chartWidth, height: '220px'}"></div>
</section>
</template>
<script>
......@@ -30,6 +30,7 @@ export default {
},
data() {
return {
chartWidth: '300px',
pieId: "titlePieId",
chartHeight: "1000px",
handledData: {},
......@@ -48,8 +49,16 @@ export default {
// },
dataList: {
handler(newValue, oldValue) {
if (process.client) {
let clientWidth =
window.outerWidth ||
document.body.clientWidth ||
document.documentElement.clientWidth;
this.chartWidth = Math.ceil(clientWidth * 0.90) + 'px';
console.log('this.chartWidth', this.chartWidth);
this.handlePieData(newValue);
this.drawPie();
}
},
deep: true
}
......
......@@ -132,7 +132,7 @@ export default {
background: #fff;
color: #333;
position: relative;
z-index: 2009;
z-index: 10000000;
.nav-back {
display: inline-block;
position: absolute;
......
<template>
<section class="container">
<CommonHeader :title="projectInfo.projectName"></CommonHeader>
<CommonHeader :title="projectInfo.projectName | shortName"></CommonHeader>
<CommonAreaSelect
@areaClick="areaTabClick"
@orgClick="orgTabClick"
......@@ -33,6 +33,7 @@
<ShowAll @action="gotoPage('/rank-days')"></ShowAll>
</div>
<div v-show="isSingleOrg">
<CommonTitle title="培训机构情况"></CommonTitle>
<OrgDoctorList
@orgDoctorTabChange="orgDoctorTabChange"
:certUserList="orgDoctorTabData.certUserList"
......@@ -305,6 +306,19 @@ export default {
}
};
},
filters: {
shortName: function (value, length = 15, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
},
// convert: function (value, unitName = '分钟') {
// if(!value) return 0 + unitName;
// return Math.ceil(value / 60) + unitName
// },
},
computed: {
...mapGetters({
orgList: "orgList",
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册