415 lines
13 KiB
Vue
415 lines
13 KiB
Vue
<template>
|
|
<lay-container :fluid="true" style="padding: 20px">
|
|
<lay-row :space="10">
|
|
<lay-col :md="24">
|
|
<lay-card>
|
|
<lay-form style="margin-top: 20px">
|
|
<lay-row>
|
|
<lay-col :md="5">
|
|
<lay-form-item label="月度：" label-width="80">
|
|
<lay-date-picker type="yearmonth" v-model="yearmonth" placeholder="月度" />
|
|
</lay-form-item>
|
|
</lay-col>
|
|
<lay-col :md="4">
|
|
<lay-form-item label-width="0">
|
|
<lay-button type="primary" @click="toSearch">查询</lay-button>
|
|
<lay-button @click="toReset" style="margin-left: 10px">重置</lay-button>
|
|
</lay-form-item>
|
|
</lay-col>
|
|
</lay-row>
|
|
</lay-form>
|
|
</lay-card>
|
|
</lay-col>
|
|
<lay-col :md="24">
|
|
<lay-card>
|
|
<template #title>
|
|
<div style="font-size: 20px;font-weight: 600;color: #333;">月度考评填报 - 分数统计</div>
|
|
</template>
|
|
<div id="main" ref="mainRef"></div>
|
|
</lay-card>
|
|
</lay-col>
|
|
<lay-col :md="24">
|
|
<lay-card>
|
|
<template #title>
|
|
<div style="font-size: 20px;font-weight: 600;color: #333;">月度考评报表 - 已参评人数统计</div>
|
|
</template>
|
|
<div id="barChart" ref="barChartRef"></div>
|
|
</lay-card>
|
|
</lay-col>
|
|
</lay-row>
|
|
</lay-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import * as echarts from 'echarts'
|
|
|
|
const mainRef = ref()
|
|
const barChartRef = ref()
|
|
const yearmonth = ref('')
|
|
|
|
// 查询方法
|
|
const toSearch = () => {
|
|
console.log('查询月度:', yearmonth.value)
|
|
// TODO: 这里可以根据月度重新获取数据并刷新图表
|
|
initChart()
|
|
initBarChart()
|
|
}
|
|
|
|
// 重置方法
|
|
const toReset = () => {
|
|
yearmonth.value = ''
|
|
// TODO: 重置后可以重新加载默认数据
|
|
initChart()
|
|
initBarChart()
|
|
}
|
|
|
|
// 初始化图表
|
|
const initChart = () => {
|
|
const chartDom = mainRef.value
|
|
// @ts-ignore
|
|
const myChart = echarts.init(chartDom)
|
|
|
|
const color = [
|
|
'#0090FF',
|
|
'#36CE9E',
|
|
'#FFC005',
|
|
'#FF515A',
|
|
'#8B5CFF',
|
|
'#00CA69'
|
|
]
|
|
|
|
const echartData = [
|
|
{
|
|
name: '内科',
|
|
value1: 94,
|
|
value2: 91
|
|
},
|
|
{
|
|
name: '外科',
|
|
value1: 93,
|
|
value2: 90
|
|
},
|
|
{
|
|
name: '儿科',
|
|
value1: 95,
|
|
value2: 92
|
|
},
|
|
{
|
|
name: '妇产科',
|
|
value1: 92,
|
|
value2: 89
|
|
},
|
|
{
|
|
name: '急诊科',
|
|
value1: 91,
|
|
value2: 88
|
|
},
|
|
{
|
|
name: '骨科',
|
|
value1: 93,
|
|
value2: 91
|
|
},
|
|
{
|
|
name: '眼科',
|
|
value1: 94,
|
|
value2: 90
|
|
},
|
|
{
|
|
name: '口腔科',
|
|
value1: 92,
|
|
value2: 89
|
|
}
|
|
]
|
|
|
|
const xAxisData = echartData.map((v) => v.name)
|
|
const yAxisData1 = echartData.map((v) => v.value1)
|
|
const yAxisData2 = echartData.map((v) => v.value2)
|
|
|
|
const hexToRgba = (hex: string, opacity: number) => {
|
|
let rgbaColor = ''
|
|
let reg = /^#[\da-f]{6}$/i
|
|
if (reg.test(hex)) {
|
|
rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
|
|
'0x' + hex.slice(3, 5)
|
|
)},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
|
|
}
|
|
return rgbaColor
|
|
}
|
|
|
|
const option = {
|
|
color: color,
|
|
legend: {
|
|
right: 10,
|
|
top: 10,
|
|
data: ['合计自评平均分', '合计科室平均分']
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function (params: any) {
|
|
return `<div style="font-weight: 600;font-size: 14px;color: #333;margin-bottom: 8px">
|
|
${params[0].name}
|
|
</div>
|
|
<div style="color: #666;font-size: 13px;line-height: 24px">
|
|
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[0]};"></span>
|
|
合计自评平均分：
|
|
<span style="color:${color[0]};font-weight:700;font-size: 14px">${params[0].value}</span>
|
|
分
|
|
</div>
|
|
<div style="color: #666;font-size: 13px;line-height: 24px">
|
|
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[1]};"></span>
|
|
合计科室平均分：
|
|
<span style="color:${color[1]};font-weight:700;font-size: 14px">${params[1].value}</span>
|
|
分
|
|
</div>`
|
|
},
|
|
extraCssText: 'background: #fff; border-radius: 4px; padding: 8px 12px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);color: #333;',
|
|
axisPointer: {
|
|
type: 'line',
|
|
lineStyle: {
|
|
color: '#ccc',
|
|
width: 1,
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
x: '50px',
|
|
y: '50px',
|
|
x2: '50px',
|
|
y2: '50px'
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
textStyle: {
|
|
color: '#333'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#D9D9D9'
|
|
}
|
|
},
|
|
data: xAxisData
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
min: 80,
|
|
max: 100,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#666'
|
|
}
|
|
},
|
|
nameTextStyle: {
|
|
color: '#666',
|
|
fontSize: 12,
|
|
lineHeight: 40
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#E9E9E9'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '合计自评平均分',
|
|
type: 'line',
|
|
smooth: true,
|
|
symbolSize: 8,
|
|
zlevel: 3,
|
|
lineStyle: {
|
|
normal: {
|
|
color: color[0],
|
|
shadowBlur: 3,
|
|
shadowColor: hexToRgba(color[0], 0.5),
|
|
shadowOffsetY: 8
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: hexToRgba(color[0], 0.3)
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: hexToRgba(color[0], 0.1)
|
|
}
|
|
],
|
|
false
|
|
),
|
|
shadowColor: hexToRgba(color[0], 0.1),
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
data: yAxisData1
|
|
},
|
|
{
|
|
name: '合计科室平均分',
|
|
type: 'line',
|
|
smooth: true,
|
|
symbolSize: 8,
|
|
zlevel: 3,
|
|
lineStyle: {
|
|
normal: {
|
|
color: color[1],
|
|
shadowBlur: 3,
|
|
shadowColor: hexToRgba(color[1], 0.5),
|
|
shadowOffsetY: 8
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: hexToRgba(color[1], 0.3)
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: hexToRgba(color[1], 0.1)
|
|
}
|
|
],
|
|
false
|
|
),
|
|
shadowColor: hexToRgba(color[1], 0.1),
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
data: yAxisData2
|
|
}
|
|
]
|
|
}
|
|
|
|
option && myChart.setOption(option)
|
|
}
|
|
|
|
// 初始化柱状图
|
|
const initBarChart = () => {
|
|
const chartDom = barChartRef.value
|
|
// @ts-ignore
|
|
const myChart = echarts.init(chartDom)
|
|
|
|
const barData = [
|
|
{ name: '内科', value: 45 },
|
|
{ name: '外科', value: 38 },
|
|
{ name: '儿科', value: 25 },
|
|
{ name: '妇产科', value: 32 },
|
|
{ name: '急诊科', value: 28 },
|
|
{ name: '骨科', value: 22 },
|
|
{ name: '眼科', value: 18 },
|
|
{ name: '口腔科', value: 20 }
|
|
]
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
formatter: function(params: any) {
|
|
return `${params[0].name}<br/>已参评人数：${params[0].value}人`
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: barData.map(item => item.name),
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLabel: {
|
|
color: '#333'
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '人数',
|
|
axisLabel: {
|
|
color: '#333'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#E9E9E9'
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '已参评人数',
|
|
type: 'bar',
|
|
barWidth: '60%',
|
|
data: barData.map(item => item.value),
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#83bff6' },
|
|
{ offset: 0.5, color: '#188df0' },
|
|
{ offset: 1, color: '#188df0' }
|
|
])
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#2378f7' },
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
{ offset: 1, color: '#83bff6' }
|
|
])
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
option && myChart.setOption(option)
|
|
}
|
|
|
|
onMounted(() => {
|
|
initChart()
|
|
initBarChart()
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
#main, #barChart {
|
|
width: 100%;
|
|
height: 400px;
|
|
}
|
|
</style>
|