mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-08 18:36:46 +08:00
报告维护加的几个echarts
This commit is contained in:
yztopen
@@ -364,6 +364,247 @@ export default {
|
||||
name: "OvervoeW",
|
||||
components: {OfficeSelect, PostSelectNew, draggable},
|
||||
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 sysTypeOptions = store.state.content_type;
|
||||
// const sysTypeOptions = fl;
|
||||
@@ -2054,248 +2295,6 @@ export default {
|
||||
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 {
|
||||
exportClickAll,
|
||||
getTabData,
|
||||
@@ -2570,4 +2569,117 @@ export default {
|
||||
.ant-table-tbody > tr > td {
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user