mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-10 03:16:44 +08:00
报告维护加的几个echarts
This commit is contained in:
yztopen
@@ -364,6 +364,247 @@ export default {
|
|||||||
name: "OvervoeW",
|
name: "OvervoeW",
|
||||||
components: {OfficeSelect, PostSelectNew, draggable},
|
components: {OfficeSelect, PostSelectNew, draggable},
|
||||||
setup() {
|
setup() {
|
||||||
|
// 组织树数据
|
||||||
|
const orgId = ref(null);
|
||||||
|
|
||||||
|
// 漏斗图数据
|
||||||
|
const funnelChart = ref(null);
|
||||||
|
let myFunnelChart = null;
|
||||||
|
|
||||||
|
// 柱状图数据
|
||||||
|
const chart = ref(null);
|
||||||
|
let myChart = null;
|
||||||
|
|
||||||
|
// 饼状图数据
|
||||||
|
const pieChart = ref(null);
|
||||||
|
let myPieChart = null;
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 初始化漏斗图
|
||||||
|
myFunnelChart = echarts.init(funnelChart.value);
|
||||||
|
const funnelOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{b}: {c} 人 ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'horizontal',
|
||||||
|
bottom: 0,
|
||||||
|
data: ['参加人数', '学习人数', '完成人数']
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '学员完成项目漏斗',
|
||||||
|
type: 'funnel',
|
||||||
|
left: '10%',
|
||||||
|
top: '50%',
|
||||||
|
bottom: '5%',
|
||||||
|
width: '80%',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
minSize: '0%',
|
||||||
|
maxSize: '100%',
|
||||||
|
sort: 'descending',
|
||||||
|
gap: 2,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
formatter: '{b}: {c} 人'
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
length: 10,
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
type: 'solid'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 1
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{value: 100, name: '参加人数', itemStyle: {color: '#5470c6'}},
|
||||||
|
{value: 50, name: '学习人数', itemStyle: {color: '#91cc75'}},
|
||||||
|
{value: 20, name: '完成人数', itemStyle: {color: '#fac858'}}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myFunnelChart.setOption(funnelOption);
|
||||||
|
|
||||||
|
// 初始化柱状图
|
||||||
|
myChart = echarts.init(chart.value);
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['学习率', '平均学习率', '整体完成率'],
|
||||||
|
bottom: 0
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '10%',
|
||||||
|
top: '15%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['0.8']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
min: 0.4,
|
||||||
|
max: 0.9,
|
||||||
|
interval: 0.025,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '学习率',
|
||||||
|
type: 'bar',
|
||||||
|
data: [0.775],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#5470c6'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter: '{c}'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '平均学习率',
|
||||||
|
type: 'bar',
|
||||||
|
data: [0.65],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#91cc75'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter: '{c}'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '整体完成率',
|
||||||
|
type: 'bar',
|
||||||
|
data: [0.5],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#fac858'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter: '{c}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
// 初始化环形图
|
||||||
|
myPieChart = echarts.init(pieChart.value);
|
||||||
|
const pieOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'horizontal',
|
||||||
|
bottom: 0,
|
||||||
|
data: ['面授课程数', '在线课程数']
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '项目概览',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: '18',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{value: 707.1, name: '面授课程数', itemStyle: {color: '#5470c6'}},
|
||||||
|
{value: 292.9, name: '在线课程数', itemStyle: {color: '#91cc75'}}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加环形图中心文本
|
||||||
|
const centerText = {
|
||||||
|
name: '概览总数',
|
||||||
|
value: 1028,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'transparent',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'center',
|
||||||
|
formatter: function () {
|
||||||
|
return '{a|概览总数}\n{b|1,028}';
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
color: '#333',
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 20
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
color: '#333',
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
lineHeight: 20
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
pieOption.series[0].data.push(centerText);
|
||||||
|
|
||||||
|
myPieChart.setOption(pieOption);
|
||||||
|
|
||||||
|
// 窗口大小变化时重新调整图表大小
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart?.resize();
|
||||||
|
myPieChart?.resize();
|
||||||
|
myFunnelChart?.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
// 组件销毁前移除事件监听器
|
||||||
|
window.removeEventListener('resize', () => {
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const sysTypeOptions = store.state.content_type;
|
const sysTypeOptions = store.state.content_type;
|
||||||
// const sysTypeOptions = fl;
|
// const sysTypeOptions = fl;
|
||||||
@@ -2054,248 +2295,6 @@ export default {
|
|||||||
return recursiveSearch(data, value, '');
|
return recursiveSearch(data, value, '');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 组织树数据
|
|
||||||
const orgId = ref(null);
|
|
||||||
|
|
||||||
// 漏斗图数据
|
|
||||||
const funnelChart = ref(null);
|
|
||||||
let myFunnelChart = null;
|
|
||||||
|
|
||||||
// 柱状图数据
|
|
||||||
const chart = ref(null);
|
|
||||||
let myChart = null;
|
|
||||||
|
|
||||||
// 饼状图数据
|
|
||||||
const pieChart = ref(null);
|
|
||||||
let myPieChart = null;
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// 初始化漏斗图
|
|
||||||
myFunnelChart = echarts.init(funnelChart.value);
|
|
||||||
const funnelOption = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
formatter: '{b}: {c} 人 ({d}%)'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'horizontal',
|
|
||||||
bottom: 0,
|
|
||||||
data: ['参加人数', '学习人数', '完成人数']
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '学员完成项目漏斗',
|
|
||||||
type: 'funnel',
|
|
||||||
left: '10%',
|
|
||||||
top: '50%',
|
|
||||||
bottom: '5%',
|
|
||||||
width: '80%',
|
|
||||||
min: 0,
|
|
||||||
max: 100,
|
|
||||||
minSize: '0%',
|
|
||||||
maxSize: '100%',
|
|
||||||
sort: 'descending',
|
|
||||||
gap: 2,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'inside',
|
|
||||||
formatter: '{b}: {c} 人'
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
length: 10,
|
|
||||||
lineStyle: {
|
|
||||||
width: 1,
|
|
||||||
type: 'solid'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
borderColor: '#fff',
|
|
||||||
borderWidth: 1
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
fontSize: 14
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{value: 100, name: '参加人数', itemStyle: {color: '#5470c6'}},
|
|
||||||
{value: 50, name: '学习人数', itemStyle: {color: '#91cc75'}},
|
|
||||||
{value: 20, name: '完成人数', itemStyle: {color: '#fac858'}}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
myFunnelChart.setOption(funnelOption);
|
|
||||||
|
|
||||||
// 初始化柱状图
|
|
||||||
myChart = echarts.init(chart.value);
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['学习率', '平均学习率', '整体完成率'],
|
|
||||||
bottom: 0
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '10%',
|
|
||||||
top: '15%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['0.8']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
min: 0.4,
|
|
||||||
max: 0.9,
|
|
||||||
interval: 0.025,
|
|
||||||
axisLabel: {
|
|
||||||
formatter: '{value}'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '学习率',
|
|
||||||
type: 'bar',
|
|
||||||
data: [0.775],
|
|
||||||
itemStyle: {
|
|
||||||
color: '#5470c6'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
formatter: '{c}'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '平均学习率',
|
|
||||||
type: 'bar',
|
|
||||||
data: [0.65],
|
|
||||||
itemStyle: {
|
|
||||||
color: '#91cc75'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
formatter: '{c}'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '整体完成率',
|
|
||||||
type: 'bar',
|
|
||||||
data: [0.5],
|
|
||||||
itemStyle: {
|
|
||||||
color: '#fac858'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
formatter: '{c}'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
// 初始化环形图
|
|
||||||
myPieChart = echarts.init(pieChart.value);
|
|
||||||
const pieOption = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'horizontal',
|
|
||||||
bottom: 0,
|
|
||||||
data: ['面授课程数', '在线课程数']
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '项目概览',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['40%', '70%'],
|
|
||||||
center: ['50%', '50%'],
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center'
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: '18',
|
|
||||||
fontWeight: 'bold'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{value: 707.1, name: '面授课程数', itemStyle: {color: '#5470c6'}},
|
|
||||||
{value: 292.9, name: '在线课程数', itemStyle: {color: '#91cc75'}}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
// 添加环形图中心文本
|
|
||||||
const centerText = {
|
|
||||||
name: '概览总数',
|
|
||||||
value: 1028,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: 'transparent',
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'center',
|
|
||||||
formatter: function () {
|
|
||||||
return '{a|概览总数}\n{b|1,028}';
|
|
||||||
},
|
|
||||||
rich: {
|
|
||||||
a: {
|
|
||||||
color: '#333',
|
|
||||||
fontSize: 14,
|
|
||||||
lineHeight: 20
|
|
||||||
},
|
|
||||||
b: {
|
|
||||||
color: '#333',
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
lineHeight: 20
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
pieOption.series[0].data.push(centerText);
|
|
||||||
|
|
||||||
myPieChart.setOption(pieOption);
|
|
||||||
|
|
||||||
// 窗口大小变化时重新调整图表大小
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
myChart?.resize();
|
|
||||||
myPieChart?.resize();
|
|
||||||
myFunnelChart?.resize();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
// 组件销毁前移除事件监听器
|
|
||||||
window.removeEventListener('resize', () => {
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
exportClickAll,
|
exportClickAll,
|
||||||
getTabData,
|
getTabData,
|
||||||
@@ -2570,4 +2569,117 @@ export default {
|
|||||||
.ant-table-tbody > tr > td {
|
.ant-table-tbody > tr > td {
|
||||||
user-select: text !important;
|
user-select: text !important;
|
||||||
}
|
}
|
||||||
|
.stat-cards {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 15px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
||||||
|
|
||||||
|
:deep(.ant-card-head) {
|
||||||
|
padding: 16px 24px;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-card-body) {
|
||||||
|
padding: 16px 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.charts-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.chart-card {
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 200px;
|
||||||
|
margin-right: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
:deep(.ant-card-head) {
|
||||||
|
padding: 16px 24px;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-content {
|
||||||
|
padding: 16px 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.funnel-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.funnel-label {
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 16px;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-text {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-cloud {
|
||||||
|
padding: 16px 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
padding: 5px 10px;
|
||||||
|
background: #f0faff;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user