From f98dba354a2d8f7b8d77984f2667432ff0b33363 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期一, 27 二月 2023 15:25:20 +0800
Subject: [PATCH] 添加基础配置表
---
src/components/chart/FileFormat.vue | 188 +++++++++++++++++++++++------------------------
1 files changed, 92 insertions(+), 96 deletions(-)
diff --git a/src/components/chart/FileFormat.vue b/src/components/chart/FileFormat.vue
index 81ed640..505499b 100644
--- a/src/components/chart/FileFormat.vue
+++ b/src/components/chart/FileFormat.vue
@@ -16,12 +16,7 @@
this.initChart()
},
methods: {
-
-
-
async initChart() {
-
-
let data = [
{
name: "user1",
@@ -69,109 +64,110 @@
let yAxis = []
if (res.code == 200) {
data = res.result.map(item => {
- xAxis.push(item.name);
- yAxis.push(item.count);
+ xAxis.push(item.name)
+ yAxis.push(item.count)
})
}
let option = {
- grid: {
- // 璁╁浘琛ㄥ崰婊″鍣�
- top: "12%",
- left: "15%",
- right: "10%",
- bottom: "15%",
- },
-
- xAxis: {
- data: xAxis,
- axisLabel: {
- show: true,
- color: "#ffff",
+ grid: {
+ // 璁╁浘琛ㄥ崰婊″鍣�
+ top: "12%",
+ left: "15%",
+ right: "10%",
+ bottom: "15%",
},
- axisTick: {
- show: false,
+ tooltip: {
+ show: true
},
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(95, 180, 237, 0.32)",
+ xAxis: {
+ data: xAxis,
+ axisLabel: {
+ show: true,
+ color: "#ffff",
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(95, 180, 237, 0.32)",
+ },
},
},
- },
- yAxis: {
- axisLine: {
- show: false,
-
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: "#ffff",
- },
- // 鍒嗗壊绾�
- splitLine: {
+ yAxis: {
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#ffff",
+ },
+ // 鍒嗗壊绾�
+ splitLine: {
lineStyle: {
color: "#5d7289",
width: 1,
- type: "dashed"
- }
- },
- },
- series: [
- {
- // 椤堕儴鍦嗙墖
- type: "pictorialBar",
- animation: false,
- itemStyle: {
- color: "rgba(115, 240, 252, 1)",
- },
- symbolRepeat: false,
- symbolSize: [15, 8],
- symbolMargin: 1,
- z: 10,
- data: data,
- symbolPosition: "end",
- symbolOffset: [0, -4],
- },
- {
- // 搴曢儴鍦嗙墖
- type: "pictorialBar",
- animation: false,
-
- itemStyle: {
- color: "rgba(50, 96, 225, 0.8)",
- },
- symbolRepeat: false,
- symbolSize: [15, 8],
- symbolMargin: 1,
- z: 10,
- data: data,
- symbolPosition: "start",
- symbolOffset: [0, 3],
- },
- {
- barWidth: 15,
- animation: false,
-
- type: "bar",
- label: {
- show: true,
- position: "top",
- textStyle: {
- color: "#ffff",
+ type: "dashed",
},
},
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 1, color: "rgba(82, 180, 249, 0.35)" },
- { offset: 0, color: "rgba(82, 180, 249, 1)" },
- ]),
- },
- data: yAxis,
},
- ],
-};
+ series: [
+ {
+ // 椤堕儴鍦嗙墖
+ type: "pictorialBar",
+ animation: false,
+ itemStyle: {
+ color: "rgba(115, 240, 252, 1)",
+ },
+ symbolRepeat: false,
+ symbolSize: [15, 8],
+ symbolMargin: 1,
+ z: 10,
+ data: data,
+ symbolPosition: "end",
+ symbolOffset: [0, -4],
+ },
+ {
+ // 搴曢儴鍦嗙墖
+ type: "pictorialBar",
+ animation: false,
+
+ itemStyle: {
+ color: "rgba(50, 96, 225, 0.8)",
+ },
+ symbolRepeat: false,
+ symbolSize: [15, 8],
+ symbolMargin: 1,
+ z: 10,
+ data: data,
+ symbolPosition: "start",
+ symbolOffset: [0, 3],
+ },
+ {
+ barWidth: 15,
+ animation: false,
+
+ type: "bar",
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#ffff",
+ },
+ },
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 1, color: "rgba(82, 180, 249, 0.35)" },
+ { offset: 0, color: "rgba(82, 180, 249, 1)" },
+ ]),
+ },
+ data: yAxis,
+ },
+ ],
+ }
const chart = echarts.init(this.$refs.chart)
@@ -187,6 +183,6 @@
<style lang="less" scoped>
.file-format {
width: 100%;
- height:calc(100% - 30px);
+ height: calc(100% - 30px);
}
</style>
--
Gitblit v1.9.3