150 lines
5.2 KiB
Vue
150 lines
5.2 KiB
Vue
<template>
|
|
<div class="chart-container">
|
|
<div class="title">单位咨询数量统计</div>
|
|
<div ref="chartRef" class="chart"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
|
|
import { getDeptCountStat } from '/@/views/healthConsultation/api/health';
|
|
|
|
const chartRef = ref<HTMLDivElement | null>(null);
|
|
let chart: echarts.ECharts | null = null;
|
|
|
|
function getData() {
|
|
getDeptCountStat()
|
|
.then((res: any) => {
|
|
if (res.code == 200) {
|
|
// 提取数据
|
|
const consultHelperCounts = res.result.map((item: any) => item.consultHelperCount);
|
|
const consultDocCounts = res.result.map((item: any) => item.consultDocCount);
|
|
const departNames = res.result.map((item: any) => item.departName);
|
|
initChart(departNames, consultDocCounts, consultHelperCounts);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
|
|
const initChart = (departNames: string[], consultDocCounts: number[], consultHelperCounts: number[]) => {
|
|
if (!chartRef.value) return;
|
|
chart = echarts.init(chartRef.value);
|
|
|
|
const option: echarts.EChartsOption = {
|
|
backgroundColor: 'transparent',
|
|
// title: {
|
|
// text: '单位咨询数量统计',
|
|
// left: 'center',
|
|
// top: 10,
|
|
// textStyle: {
|
|
// color: '#fff',
|
|
// fontSize: 18,
|
|
// },
|
|
// },
|
|
legend: {
|
|
top: 10,
|
|
textStyle: { color: '#fff' },
|
|
itemWidth: 20,
|
|
itemHeight: 16,
|
|
itemGap: 30, // 默认 10，这里改成 30，让两段文字隔开一些
|
|
// 圆环 icon
|
|
// icon: 'path://M512 0a512 512 0 1 0 0 1024A512 512 0 0 0 512 0zm0 896a384 384 0 1 1 0-768 384 384 0 0 1 0 768z',
|
|
icon: 'circle',
|
|
data: ['员工咨询全科医生', '员工咨询专家'],
|
|
},
|
|
grid: {
|
|
top: 70,
|
|
left: 50,
|
|
right: 30,
|
|
bottom: 70,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: departNames,
|
|
axisLine: { lineStyle: { color: '#3d5269' } },
|
|
axisLabel: {
|
|
color: '#fff',
|
|
fontSize: 10,
|
|
rotate: 30,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: { lineStyle: { color: '#3d5269' } },
|
|
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
|
|
axisLabel: { color: '#89DBFF' },
|
|
},
|
|
series: [
|
|
{
|
|
name: '员工咨询全科医生',
|
|
type: 'bar',
|
|
data: consultDocCounts,
|
|
barWidth: 12, // 更细的柱子
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{ offset: 0, color: 'rgba(90,191,255,0.7)' }, // 中心透明
|
|
{ offset: 0.5, color: 'rgba(30,166,253,0.4)' }, // 中间过渡
|
|
{ offset: 1, color: 'rgba(30,166,253,0.7)' }, // 边缘实心
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
name: '员工咨询专家',
|
|
type: 'bar',
|
|
data: consultHelperCounts,
|
|
barWidth: 12, // 更细的柱子
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{ offset: 0, color: 'rgba(60,255,253,0.7)' }, // 中心透明
|
|
{ offset: 0.5, color: 'rgba(60,255,253,0.4)' }, // 中间过渡
|
|
{ offset: 1, color: 'rgba(48,223,221,0.7)' }, // 边缘实心
|
|
]),
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
chart.setOption(option);
|
|
window.addEventListener('resize', () => chart?.resize());
|
|
};
|
|
|
|
onMounted(() => {
|
|
getData();
|
|
// initChart();
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
chart?.dispose();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart-container {
|
|
height: 100%;
|
|
/* width: calc(100% / 5); */
|
|
border: 1px solid #00ccff;
|
|
border-radius: 14px;
|
|
background: rgba(8, 75, 100, 0.2);
|
|
.title {
|
|
height: 40px;
|
|
border-radius: 14px 14px 0 0;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
letter-spacing: 2px;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
line-height: 40px;
|
|
padding: 0 20px;
|
|
background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
|
|
}
|
|
.chart {
|
|
width: 100%;
|
|
height: calc(100% - 40px);
|
|
}
|
|
}
|
|
</style>
|