From 8201c6464acc4f623b44e725254b6d8271d88873 Mon Sep 17 00:00:00 2001 From: xuyiming Date: Mon, 13 Jul 2020 11:20:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B8=A6=E6=BB=9A=E5=8A=A8=E6=9D=A1=E7=9A=84?= =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/e-charts/histogramScroll.vue | 337 +++++++++++++++++++ src/pages/workbench/fwgl/fwglList.vue | 343 +------------------- 2 files changed, 340 insertions(+), 340 deletions(-) create mode 100644 src/components/e-charts/histogramScroll.vue diff --git a/src/components/e-charts/histogramScroll.vue b/src/components/e-charts/histogramScroll.vue new file mode 100644 index 0000000..a222b31 --- /dev/null +++ b/src/components/e-charts/histogramScroll.vue @@ -0,0 +1,337 @@ + + + diff --git a/src/pages/workbench/fwgl/fwglList.vue b/src/pages/workbench/fwgl/fwglList.vue index 4c5438f..8335a6f 100644 --- a/src/pages/workbench/fwgl/fwglList.vue +++ b/src/pages/workbench/fwgl/fwglList.vue @@ -76,11 +76,7 @@ 工作区域审批（1） - + @@ -124,6 +120,7 @@ import apassList from "@/components/apass-list"; import apassDialog from "@/components/apass-dialog"; import allotInfoConfirm from "@/components/allot-info-confirm"; import organizationList from "@/components/organization-list/organization-list"; +import histogramScroll from "@/components/e-charts/histogramScroll"; export default { components: { @@ -131,6 +128,7 @@ export default { apassDialog, allotInfoConfirm, organizationList, + histogramScroll, }, data: () => ({ level: 0, // 用户等级 @@ -1674,335 +1672,6 @@ export default { ], }; }, - getHistogramOption(_xAxisData, _series) { - return { - tooltip: { - trigger: "axis", - /* axisPointer: { - crossStyle: { - color: "#999", - }, - }, */ - backgroundColor: "#242c43", - textStyle: { - fontSize: 12, - lineHeight: 20, - color: "#fff", - }, - }, - grid: { - left: 10, - right: 10, - bottom: 25, - top: 45, - containLabel: true, - }, - color: ["#525e98", "#90b7c1", "#d06d1f", "#e4aa4f"], - legend: { - right: "center", - top: 0, - itemWidth: 10, - itemHeight: 10, - icon: "roundRect", - orient: "horizontal", - backgroundColor: "#f8f9fd", - textStyle: { - fontSize: 12, - lineHeight: 20, - color: "#a9aec0", - }, - data: ["CPU", "内存", "数据盘", "容器组"], - }, - xAxis: [ - { - type: "category", - axisLabel: { - textStyle: { - color: "#0d1847", - fontSize: 12, - lineHeight: 20, - }, - }, - axisTick: { - show: false, - }, - axisLine: { - lineStyle: { - color: "#e3e5ef", - }, - }, - splitLine: { - show: false, - }, - /* splitArea: { - show: true, - areaStyle: { - color: ["#f4f5fd", "#fff"], - opacity: 0.5, - }, - }, */ - axisPointer: { - type: "shadow", - }, - data: [ - "办公费", - "印刷费", - "水费", - "水费", - "邮电费", - "物业管理费", - "差旅费", - "因公出国（境）费用", - "维修（护）费", - "会议费", - "租聘费", - "培训费", - "取暖费", - "公务接待费", - "公务用车运行", - "其他交通费用", - "房屋建筑物购建", - "办公设备购置", - "大型修缮", - "信息网络及软件购置更新", - "公务用车购置", - "咨询费", - "手续费", - "劳务费", - "委托业务费", - "其他商品和服务支出", - "专用设备购置", - "基础设施建设", - "其他交通工具购置", - "其他资本性支出", - ], - }, - ], - yAxis: [ - { - type: "value", - min: 0, - axisLabel: { - formatter: "{value}", - textStyle: { - color: "#a9aec0", - fontSize: 12, - }, - }, - axisTick: { - show: false, - }, - axisLine: { - lineStyle: { - color: "#e3e5ef", - }, - }, - splitLine: { - lineStyle: { - type: "dashed", - color: ["#f2f2f2"], - width: 1, - }, - }, - }, - ], - series: [ - { - type: "bar", - barMaxWidth: 12, - data: [ - 17931.63, - 2420.69, - 399.4, - 2581.2, - 1571.79, - 3028.14, - 8041.46, - 1616.08, - 7159.78, - 3122.55, - 2211.05, - 10573.26, - 1325.09, - 1290.44, - 2301.95, - 3344.42, - 5687.6, - 2117.72, - 442.4, - 14853.71, - 96.25, - 170.19, - 40.74, - 3947.28, - 12558.87, - 12546.87, - 6945.36, - 683.28, - 73.17, - 169.15, - ], - itemStyle: { - normal: { - barBorderRadius: [6, 6, 6, 6], - }, - }, - name: "CPU", - }, - { - type: "bar", - barMaxWidth: 12, - data: [ - 17931.63, - 2420.69, - 399.4, - 2581.2, - 1571.79, - 3028.14, - 8041.46, - 1616.08, - 7159.78, - 3122.55, - 2211.05, - 10573.26, - 1325.09, - 1290.44, - 2301.95, - 3344.42, - 5687.6, - 2117.72, - 442.4, - 14853.71, - 96.25, - 170.19, - 40.74, - 3947.28, - 12558.87, - 12546.87, - 6945.36, - 683.28, - 73.17, - 169.15, - ], - itemStyle: { - normal: { - barBorderRadius: [6, 6, 6, 6], - }, - }, - name: "内存", - }, - { - type: "bar", - barMaxWidth: 12, - data: [ - 17931.63, - 2420.69, - 399.4, - 2581.2, - 1571.79, - 3028.14, - 8041.46, - 1616.08, - 7159.78, - 3122.55, - 2211.05, - 10573.26, - 1325.09, - 1290.44, - 2301.95, - 3344.42, - 5687.6, - 2117.72, - 442.4, - 14853.71, - 96.25, - 170.19, - 40.74, - 3947.28, - 12558.87, - 12546.87, - 6945.36, - 683.28, - 73.17, - 169.15, - ], - itemStyle: { - normal: { - barBorderRadius: [6, 6, 6, 6], - }, - }, - name: "数据盘", - }, - { - type: "bar", - barMaxWidth: 12, - data: [ - 17931.63, - 2420.69, - 399.4, - 2581.2, - 1571.79, - 3028.14, - 8041.46, - 1616.08, - 7159.78, - 3122.55, - 2211.05, - 10573.26, - 1325.09, - 1290.44, - 2301.95, - 3344.42, - 5687.6, - 2117.72, - 442.4, - 14853.71, - 96.25, - 170.19, - 40.74, - 3947.28, - 12558.87, - 12546.87, - 6945.36, - 683.28, - 73.17, - 169.15, - ], - itemStyle: { - normal: { - barBorderRadius: [6, 6, 6, 6], - }, - }, - name: "容器组", - }, - ], - dataZoom: [ - { type: "inside", start: 0, end: 20 }, - { - show: true, - type: "slider", - height: 20, - bottom: 0, - start: 0, - end: 100, - fillerColor: "#e6ebfe", - handleStyle: { color: "#b4c0f5" }, - backgroundColor: "#f8f9fd", - borderColor: "#f8f9fd", - textStyle: { color: "transparent", fontSize: "12px" }, - dataBackground: { - lineStyle: { color: "transparent" }, - areaStyle: { color: "transparent" }, - }, - }, - ], - }; - }, - resizeColumn() { - if (this.$refs.adminHistogram) { - this.$refs.adminHistogram.resize(); - } - }, approveWorkspace() { this.$router.push({ path: `/fwgl/${this.level}/${this.type}/approveWorkspace`, @@ -2034,12 +1703,6 @@ export default { } }); }, - mounted() { - window.addEventListener("resize", this.resizeColumn); - }, - destroyed() { - window.removeEventListener("resize", this.resizeColumn); - }, }; -- 2.26.0