8 changed files with 307 additions and 16 deletions
@ -0,0 +1,252 @@ |
|||
<template> |
|||
<!-- <div>数据统计组件</div> --> |
|||
<div style="width: 100%; height: 350px" class="chart-box"> |
|||
<div id="Categorymap" style="height: 350px"></div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState } from 'vuex'; |
|||
import { doctorComplete } from 'config/api'; |
|||
import mixins from 'views/Mixin/mixin.js'; |
|||
export default { |
|||
name: 'Categorymap', |
|||
mixins: [mixins], |
|||
data() { |
|||
return { |
|||
width: '', |
|||
height: '', |
|||
list: [], |
|||
xDataList: [], |
|||
aList: [], // 未完成数组 |
|||
bList: [], // 已完成数组 |
|||
cList: [], // 进行中数组 |
|||
dList: [], // 废弃的数组 |
|||
eList: [], // 超时的数组 |
|||
}; |
|||
}, |
|||
computed: mapState('home', ['hospitalId']), |
|||
mounted() { |
|||
this.init(this.drawLine); |
|||
const that = this; |
|||
window.onresize = () => { |
|||
return (() => { |
|||
that.init(this.drawLine); |
|||
})(); |
|||
}; |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
async drawLine() { |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
let myChart = this.$echarts.init(document.getElementById('Categorymap')); |
|||
await this.getData(this.hospitalId); |
|||
// 绘制图表 |
|||
var option = { |
|||
legend: { |
|||
data: ['新建', '数据收集按时完成', '数据收集中', '废弃', '数据收集超时'], |
|||
top: 30, |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
axisTick: { show: false }, |
|||
data: this.xDataList, |
|||
}, |
|||
], |
|||
yAxis: [{ type: 'value' }], |
|||
series: [ |
|||
{ |
|||
name: '新建', |
|||
type: 'bar', |
|||
barGap: 0, |
|||
// label: labelOption, |
|||
emphasis: { focus: 'series' }, |
|||
data: this.aList, |
|||
barWidth: 20, |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
formatter: '{c}', |
|||
show: true, |
|||
position: 'top', |
|||
textStyle: { |
|||
fontSize: '12', |
|||
color: '#000', |
|||
}, |
|||
}, |
|||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#FCB155' }, //柱图渐变色 |
|||
{ offset: 1, color: '#EC535F' }, //柱图渐变色 |
|||
]), |
|||
}, |
|||
emphasis: { |
|||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#FCB155' }, //柱图高亮渐变色 |
|||
{ offset: 1, color: '#EC535F' }, //柱图高亮渐变色 |
|||
]), |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
name: '数据收集按时完成', |
|||
type: 'bar', |
|||
// label: labelOption, |
|||
emphasis: { focus: 'series' }, |
|||
data: this.bList, |
|||
barWidth: 20, |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
formatter: '{c}', |
|||
show: true, |
|||
position: 'top', |
|||
textStyle: { |
|||
fontSize: '12', |
|||
color: '#000', |
|||
}, |
|||
}, |
|||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#6D46FF' }, //柱图渐变色 |
|||
{ offset: 1, color: '#360CE6' }, //柱图渐变色 |
|||
]), |
|||
}, |
|||
emphasis: { |
|||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#6D46FF' }, //柱图高亮渐变色 |
|||
{ offset: 1, color: '#360CE6' }, //柱图高亮渐变色 |
|||
]), |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
name: '数据收集中', |
|||
type: 'bar', |
|||
// label: labelOption, |
|||
emphasis: { focus: 'series' }, |
|||
data: this.cList, |
|||
barWidth: 20, |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
formatter: '{c}', |
|||
show: true, |
|||
position: 'top', |
|||
textStyle: { |
|||
fontSize: '12', |
|||
color: '#000', |
|||
}, |
|||
}, |
|||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#96E5F4' }, //柱图渐变色 |
|||
{ offset: 1, color: '#21B0DC' }, //柱图渐变色 |
|||
]), |
|||
}, |
|||
emphasis: { |
|||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#96E5F4' }, //柱图高亮渐变色 |
|||
{ offset: 1, color: '#21B0DC' }, //柱图高亮渐变色 |
|||
]), |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
name: '废弃', |
|||
type: 'bar', |
|||
// label: labelOption, |
|||
emphasis: { focus: 'series' }, |
|||
data: this.dList, |
|||
barWidth: 20, |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
formatter: '{c}', |
|||
show: true, |
|||
position: 'top', |
|||
textStyle: { |
|||
fontSize: '12', |
|||
color: '#000', |
|||
}, |
|||
}, |
|||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#f00' }, //柱图渐变色 |
|||
{ offset: 1, color: '#F00' }, //柱图渐变色 |
|||
]), |
|||
}, |
|||
emphasis: { |
|||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#F00' }, //柱图高亮渐变色 |
|||
{ offset: 1, color: '#F00' }, //柱图高亮渐变色 |
|||
]), |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
name: '数据收集超时', |
|||
type: 'bar', |
|||
// label: labelOption, |
|||
emphasis: { focus: 'series' }, |
|||
data: this.eList, |
|||
barWidth: 20, |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
formatter: '{c}', |
|||
show: true, |
|||
position: 'top', |
|||
textStyle: { |
|||
fontSize: '12', |
|||
color: '#000', |
|||
}, |
|||
}, |
|||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#F5D041' }, //柱图渐变色 |
|||
{ offset: 1, color: '#FF9000' }, //柱图渐变色 |
|||
]), |
|||
}, |
|||
emphasis: { |
|||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#F5D041' }, //柱图高亮渐变色 |
|||
{ offset: 1, color: '#FF9000' }, //柱图高亮渐变色 |
|||
]), |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
myChart.setOption(option); |
|||
}, |
|||
async getData(hospitalId) { |
|||
try { |
|||
const params = { param: { hospitalId } }; |
|||
const res = await doctorComplete(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.xDataList = []; |
|||
this.aList = []; |
|||
this.bList = []; |
|||
this.cList = []; |
|||
this.dList = []; |
|||
this.eList = []; |
|||
for (let i = 0; i < data.length; i++) { |
|||
this.forList(data[i]); |
|||
} |
|||
} else { |
|||
this.$message.error('获取数据失败'); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error('获取数据失败'); |
|||
} |
|||
}, |
|||
forList(obj) { |
|||
this.xDataList.push(obj.doctorName); |
|||
this.aList.push(obj.unfinished); |
|||
this.bList.push(obj.completed); |
|||
this.cList.push(obj.underway); |
|||
this.dList.push(obj.discarded); |
|||
this.eList.push(obj.overtime); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped ></style> |
|||
Loading…
Reference in new issue