Skip to content

A
apaas-ui
Commit 8201c646 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

带滚动条的柱状图

parent 79c7ef84
Show whitespace changes
Inline Side-by-side
Showing with 340 additions and 340 deletions
src/components/e-charts/histogramScroll.vue 0 → 100644
View file @ 8201c646
<template>
<chart
ref="adminHistogram"
:options="getHistogramOption()"
style="width:100%;height:100%;"
/>
</template>
<script>
export default {
props: {
xAxis: {
type: Array,
default: () => [
"办公费",
"印刷费",
"水费",
"水费",
"邮电费",
"物业管理费",
"差旅费",
"因公出国（境）费用",
"维修（护）费",
"会议费",
"租聘费",
"培训费",
"取暖费",
"公务接待费",
"公务用车运行",
"其他交通费用",
"房屋建筑物购建",
"办公设备购置",
"大型修缮",
"信息网络及软件购置更新",
"公务用车购置",
"咨询费",
"手续费",
"劳务费",
"委托业务费",
"其他商品和服务支出",
"专用设备购置",
"基础设施建设",
"其他交通工具购置",
"其他资本性支出",
],
},
series: {
type: Array,
default: () => [
{
name: "CPU",
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,
],
},
{
name: "内存",
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,
],
},
{
name: "数据盘",
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,
],
},
{
name: "容器组",
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,
],
},
],
},
},
methods: {
getHistogramOption(_xAxisData, _series) {
let _self = this;
return {
tooltip: {
trigger: "axis",
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: _self.xAxis,
},
],
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: _self.series.map((item) => ({
...item,
type: "bar",
barMaxWidth: 12,
itemStyle: {
normal: {
barBorderRadius: [6, 6, 6, 6],
},
},
})),
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();
}
},
},
mounted() {
window.addEventListener("resize", this.resizeColumn);
},
destroyed() {
window.removeEventListener("resize", this.resizeColumn);
},
};
</script>
src/pages/workbench/fwgl/fwglList.vue
View file @ 8201c646
...@@ -76,11 +76,7 @@ ...@@ -76,11 +76,7 @@
<el-button type="primary" size="mini" @click="approveWorkspace"> <el-button type="primary" size="mini" @click="approveWorkspace">
工作区域审批（1） 工作区域审批（1）
</el-button> </el-button>
<chart <histogramScroll></histogramScroll>
ref="adminHistogram"
:options="getHistogramOption()"
style="width:100%;height:100%;"
/>
</div> </div>
</div> </div>
</template> </template>
...@@ -124,6 +120,7 @@ import apassList from "@/components/apass-list"; ...@@ -124,6 +120,7 @@ import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog"; import apassDialog from "@/components/apass-dialog";
import allotInfoConfirm from "@/components/allot-info-confirm"; import allotInfoConfirm from "@/components/allot-info-confirm";
import organizationList from "@/components/organization-list/organization-list"; import organizationList from "@/components/organization-list/organization-list";
import histogramScroll from "@/components/e-charts/histogramScroll";
export default { export default {
components: { components: {
...@@ -131,6 +128,7 @@ export default { ...@@ -131,6 +128,7 @@ export default {
apassDialog, apassDialog,
allotInfoConfirm, allotInfoConfirm,
organizationList, organizationList,
histogramScroll,
}, },
data: () => ({ data: () => ({
level: 0, // 用户等级 level: 0, // 用户等级
...@@ -1674,335 +1672,6 @@ export default { ...@@ -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() { approveWorkspace() {
this.$router.push({ this.$router.push({
path: `/fwgl/${this.level}/${this.type}/approveWorkspace`, path: `/fwgl/${this.level}/${this.type}/approveWorkspace`,
...@@ -2034,12 +1703,6 @@ export default { ...@@ -2034,12 +1703,6 @@ export default {
} }
}); });
}, },
mounted() {
window.addEventListener("resize", this.resizeColumn);
},
destroyed() {
window.removeEventListener("resize", this.resizeColumn);
},
}; };
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment