demo
/
ts-bigscreen-vue
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

柱形图优化

This commit is contained in:
JenniferW 2025-09-09 10:03:07 +08:00
parent 330ec1cf20
commit 191570fb3a
1 changed files with 274 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

348
src/views/component/DataWarehouse.vue
View File

@ -2,29 +2,17 @@
<div class="data-warehouse">
<!-- 主标题区域 - 单独放左边 -->
<div class="main-title-section">
<img src="@/assets/33.png" alt="" class="title-image" />
<img src="@/assets/33.png" alt="数据仓库图标" class="title-image" />
<span>数据仓库</span>
</div>
<!-- 内容区域 - 放右边，与标题区域左右布局 -->
<div class="warehouse-container">
<div class="warehouse-layers">
<!-- DWD(数据明细层) - 左侧 -->
<!-- DWD(数据明细层) - 左侧，使用ECharts圆柱柱状图 -->
<div class="layer-item dwd-layer">
<div class="layer-title">DWD(数据明细层)</div>
<div class="layer-stats">
<div class="stat-item">
<span class="stat-label">数据子集数量</span>
<div class="subset-list">
<!-- 使用滚动排名组件 -->
<scroll-ranking
:list="top20Apis"
:visible-count="4"
:interval="2000"
/>
</div>
</div>
</div>
<div class="layer-chart" ref="dwdChartRef"></div>
</div>
<!-- 分隔线 -->
@ -58,37 +46,272 @@
</template>
<script>
import ScrollRanking from "@/components/ScrollRanking.vue";
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
export default {
components: {
ScrollRanking,
},
data() {
setup() {
const dwdChartRef = ref(null);
let dwdChart = null;
// 数据源数据 - 分离缩写和完整名称
const top20Apis = [
{ abbr: "GXXX", name: "学校概况数据子集", count: 209 },
{ abbr: "GXXS", name: "学生管理数据子集", count: 193 },
{ abbr: "GXJX", name: "教学管理数据子集", count: 127 },
{ abbr: "GXJG", name: "教职工管理数据子集", count: 231 },
{ abbr: "GXKY", name: "科研管理数据子集", count: 189 },
{ abbr: "GXCW", name: "财务管理数据子集", count: 176 },
{ abbr: "GXZC", name: "资产与设备管理数据子集", count: 156 },
{ abbr: "GXBG", name: "办公管理数据子集", count: 143 },
{ abbr: "GXWS", name: "外事(港澳台事务)管理数据子集", count: 132 },
{ abbr: "GXDA", name: "档案管理数据子集", count: 121 },
{ abbr: "GXGZ", name: "高职院校专用数据子集", count: 110 },
];
// 初始化图表
const initChart = () => {
if (dwdChart) {
dwdChart.dispose();
}
// 创建图表实例
dwdChart = echarts.init(dwdChartRef.value);
// 从数据源提取x轴(缩写)和y轴数据
const xData = top20Apis.map((item) => item.abbr);
const yData = top20Apis.map((item) => item.count);
// 配置项 - 修复悬停提示显示问题
const option = {
// backgroundColor: "#061326",
grid: {
top: "15%",
left: "-5%",
bottom: "10%",
right: "5%",
containLabel: true,
},
tooltip: {
show: true,
backgroundColor: "rgba(10, 30, 60, 0.9)",
borderColor: "rgba(74, 144, 226, 0.5)",
borderWidth: 1,
textStyle: {
color: "rgba(255, 255, 255, 0.8)",
fontSize: 13,
},
formatter: function (params) {
// 根据您提供的打印信息，params是单个对象而不是数组
// 增加调试信息，帮助确认参数结构
console.log("Tooltip params:", params);
// 检查参数是否有效
if (
!params ||
params.dataIndex === undefined ||
params.dataIndex === null
) {
return `<div>数据信息获取失败</div>`;
}
// 使用dataIndex获取对应数据
const index = params.dataIndex;
const item = top20Apis[index];
// 检查数据是否存在
if (!item) {
return `<div>数据信息未找到 (索引: ${index})</div>`;
}
// 显示完整信息
return `<div><strong>${item.abbr} ${item.name}</strong></div>
<div>数据量: ${item.count} 条</div>`;
},
padding: 10,
hideDelay: 500,
},
animation: false,
xAxis: [
{
type: "category",
data: xData,
axisTick: {
alignWithLabel: true,
},
nameTextStyle: {
color: "#82b0ec",
},
axisLine: {
show: false,
lineStyle: {
color: "#82b0ec",
},
},
axisLabel: {
textStyle: {
color: "#fff",
fontSize: 13,
fontWeight: "bold",
},
margin: 15,
rotate: 0,
},
},
],
yAxis: [
{
show: false,
type: "value",
axisLabel: {
textStyle: {
color: "#fff",
},
},
splitLine: {
lineStyle: {
color: "#0c2c5a",
},
},
axisLine: {
show: false,
},
},
],
series: [
{
name: "",
type: "pictorialBar",
symbolSize: [40, 10],
symbolOffset: [0, -6],
symbolPosition: "end",
z: 12,
label: {
normal: {
show: true,
position: "top",
fontSize: 15,
fontWeight: "bold",
color: "#34DCFF",
},
},
color: "#2DB1EF",
data: yData,
},
{
name: "",
type: "pictorialBar",
symbolSize: [40, 10],
symbolOffset: [0, 7],
z: 12,
color: "#2DB1EF",
data: yData,
},
{
name: "",
type: "pictorialBar",
symbolSize: function (d) {
return d > 0 ? [50, 15] : [0, 0];
},
symbolOffset: [0, 12],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: "#2EA9E5",
borderType: "solid",
borderWidth: 1,
},
},
data: yData,
},
{
name: "",
type: "pictorialBar",
symbolSize: [70, 20],
symbolOffset: [0, 18],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: "#19465D",
borderType: "solid",
borderWidth: 2,
},
},
data: yData,
},
{
type: "bar",
barWidth: "40",
barGap: "10%",
barCateGoryGap: "10%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
{
offset: 0,
color: "#38B2E6",
},
{
offset: 1,
color: "#0B3147",
},
]),
opacity: 0.8,
},
},
data: yData,
},
],
};
// 设置配置项
dwdChart.setOption(option);
};
// 挂载时初始化图表
onMounted(() => {
if (dwdChartRef.value) {
dwdChartRef.value.style.height = "calc(100% - 20px)";
initChart();
const handleResize = () => {
if (dwdChart) {
dwdChart.resize();
}
};
window.addEventListener("resize", handleResize);
onUnmounted(() => {
window.removeEventListener("resize", handleResize);
});
}
});
// 组件卸载时销毁图表
onUnmounted(() => {
if (dwdChart) {
dwdChart.dispose();
dwdChart = null;
}
});
return {
top20Apis: [
{ name: "GXXX 学校概况数据子集", count: 209 },
{ name: "GXXS 学生管理数据子集", count: 193 },
{ name: "GXJX 教学管理数据子集", count: 127 },
{ name: "GXJG 教职工管理数据子集", count: 231 },
{ name: "GXKY 科研管理数据子集", count: 189 },
{ name: "GXCW 财务管理数据子集", count: 176 },
{ name: "GXZC 资产与设备管理数据子集", count: 156 },
{ name: "GXBG 办公管理数据子集", count: 143 },
{ name: "GXWS 外事(港澳台事务)管理数据子集", count: 132 },
{ name: "GXDA 档案管理数据子集", count: 121 },
{ name: "GXGZ 高职院校专用数据子集", count: 110 },
],
dwdChartRef,
};
},
};
</script>
<style scoped lang="scss">
/* 样式保持不变 */
.data-warehouse {
height: 100%;
box-sizing: border-box;
overflow: hidden;
display: flex; /* 主容器变为flex，让标题和内容区域左右布局 */
display: flex;
gap: 20px;
padding: 0;
margin: 0;
@ -107,9 +330,8 @@ export default {
box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
}
// 主标题区域 - 单独放左边
.main-title-section {
flex: 0 0 100px; // 固定宽度
flex: 0 0 100px;
display: flex;
flex-direction: column;
align-items: center;
@ -130,11 +352,11 @@ export default {
}
}
// 内容区域容器 - 放右边
.warehouse-container {
flex: 1; // 占满剩余空间
flex: 1;
height: 100%;
box-sizing: border-box;
padding: 20px;
}
.warehouse-layers {
@ -142,10 +364,9 @@ export default {
gap: 15px;
height: 100%;
box-sizing: border-box;
align-items: stretch; // 确保所有子元素高度一致
align-items: stretch;
}
// 层之间的分隔线
.layer-divider {
width: 1px;
background: linear-gradient(
@ -155,7 +376,7 @@ export default {
transparent
);
align-self: center;
height: 80%; // 分隔线高度为容器的80%，视觉上更和谐
height: 80%;
}
.layer-item {
@ -174,6 +395,7 @@ export default {
margin-bottom: 12px;
text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
padding-bottom: 6px;
border-bottom: 1px solid rgba(74, 144, 226, 0.2);
}
.layer-stats {
@ -201,46 +423,20 @@ export default {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.subset-list {
margin-top: 6px;
padding-right: 6px;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
}
.subset-item {
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
padding: 5px 0;
border-bottom: 1px dashed rgba(74, 144, 226, 0.2);
&:last-child {
border-bottom: none;
}
&:hover {
color: #4a90e2;
transform: translateX(3px);
transition: all 0.2s ease;
}
}
}
}
}
.layer-chart {
flex: 1;
width: 100%;
min-height: 400px;
}
}
// ODS层使用2x2网格布局
.ods-layer .layer-stats {
grid-template-columns: repeat(2, 1fr);
}
// 响应式调整
@media (max-width: 1200px) {
.data-warehouse {
flex-direction: column;
@ -260,7 +456,6 @@ export default {
flex-direction: column;
}
// 在小屏幕上，分隔线改为水平方向
.layer-divider {
width: 80%;
height: 1px;
@ -272,5 +467,10 @@ export default {
transparent
);
}
.layer-chart {
min-height: 300px;
}
}
</style>