From 27c5590aab433687c58dbf41e9271f71008834f0 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期一, 27 二月 2023 11:48:05 +0800
Subject: [PATCH] 修改大屏首页
---
src/components/chart/FileFormat.vue | 265 ++++++++++++++++++++--------------------------------
1 files changed, 101 insertions(+), 164 deletions(-)
diff --git a/src/components/chart/FileFormat.vue b/src/components/chart/FileFormat.vue
index 2b5be35..81ed640 100644
--- a/src/components/chart/FileFormat.vue
+++ b/src/components/chart/FileFormat.vue
@@ -5,7 +5,7 @@
<script>
const fileTypeBar = require("@/assets/img/Screen/fileTypeBar.png")
import * as echarts from "echarts"
-import { countFileFormat } from "@/api/screen.js"
+import { GetTypeVisitsCount } from "@/api/screen.js"
export default {
data() {
return {
@@ -16,7 +16,12 @@
this.initChart()
},
methods: {
+
+
+
async initChart() {
+
+
let data = [
{
name: "user1",
@@ -59,182 +64,114 @@
value: 20,
},
]
- const res = await countFileFormat()
+ const res = await GetTypeVisitsCount()
+ let xAxis = []
+ let yAxis = []
if (res.code == 200) {
data = res.result.map(item => {
- return {
- name: item.type,
- value: item.number,
- }
+ xAxis.push(item.name);
+ yAxis.push(item.count);
})
}
- data.sort((a, b) => b.value - a.value)
- data = data.slice(0, 10)
- // console.log(res.result);
- let getArrByKey = (data, k) => {
- let key = k || "value"
- let res = []
- if (data) {
- data.forEach(function (t) {
- res.push(t[key])
- })
- }
- return res
- }
- let getSymbolData = data => {
- let arr = []
- for (var i = 0; i < data.length; i++) {
- arr.push({
- value: data[i].value,
- symbolPosition: "end",
- })
- }
- return arr
- }
- let opt = {
- index: 0,
- }
- let color = ["#A71A2B"]
- data = data.sort((a, b) => {
- return b.value - a.value
- })
let option = {
- backgroundColor: "transparent",
- grid: {
- top: "2%",
- bottom: "2%",
- right: "5%",
- left: "10%",
- containLabel: true,
+ grid: {
+ // 璁╁浘琛ㄥ崰婊″鍣�
+ top: "12%",
+ left: "15%",
+ right: "10%",
+ bottom: "15%",
+ },
+
+ xAxis: {
+ data: xAxis,
+ axisLabel: {
+ show: true,
+ color: "#ffff",
},
- xAxis: {
+ axisTick: {
show: false,
},
- yAxis: [
- {
- triggerEvent: true,
- show: true,
- inverse: true,
- data: getArrByKey(data, "name"),
- axisLine: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: false,
- interval: 0,
- color: "#fff",
- align: "left",
- margin: 0,
- fontSize: 13,
- formatter: function (value, index) {
- return "{title|" + value + "}"
- },
- rich: {
- title: {
- width: 165,
- },
- },
- },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(95, 180, 237, 0.32)",
},
- {
- triggerEvent: true,
- show: true,
- inverse: true,
- data: getArrByKey(data, "name"),
- axisLine: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- shadowOffsetX: "-20px",
- color: "#fff",
- align: "right",
- verticalAlign: "bottom",
- lineHeight: 20,
- fontSize: 13,
- formatter: function (value, index) {
- return data[index].value
- },
- },
+ },
+ },
+ yAxis: {
+ axisLine: {
+ show: false,
+
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#ffff",
+ },
+ // 鍒嗗壊绾�
+ splitLine: {
+ lineStyle: {
+ color: "#5d7289",
+ width: 1,
+ type: "dashed"
+ }
},
- ],
- series: [
- {
- name: "XXX",
- type: "pictorialBar",
+ },
+ 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,
- symbol:
- "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAxCAYAAABznEEcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlFNDgzRTBDQjNFNzExRURCRDc5RTVGRkQxNDc0MjUxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlFNDgzRTBEQjNFNzExRURCRDc5RTVGRkQxNDc0MjUxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUU0ODNFMEFCM0U3MTFFREJENzlFNUZGRDE0NzQyNTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUU0ODNFMEJCM0U3MTFFREJENzlFNUZGRDE0NzQyNTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5DGVZNAAAOOElEQVR42qxa+Y8c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",
- symbolSize: [25, 25],
- symbolOffset: [20, 0],
- z: 5,
- data: getSymbolData(data),
+ itemStyle: {
+ color: "rgba(50, 96, 225, 0.8)",
},
- {
- name: "鏉�",
- type: "bar",
- showBackground: true,
- barBorderRadius: 10,
- yAxisIndex: 0,
- data: data,
- barWidth: 8,
- // align: left,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 1,
- 0,
- [
- {
- offset: 0,
- color: "#5A9DFF",
- },
- {
- offset: 0.7,
- color: "#1878FF",
- },
- {
- offset: 1,
- color: "#164182",
- },
- ],
- false
- ),
- barBorderRadius: 5,
- },
- // color: '#A71A2B',
- barBorderRadius: 2,
- },
- label: {
- normal: {
- color: "#fff",
- show: true,
- position: ["0px", "-25px"],
- textStyle: {
- fontSize: 14,
- },
- formatter: function (a, b) {
- return a.name
- },
- },
+ 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)
@@ -250,6 +187,6 @@
<style lang="less" scoped>
.file-format {
width: 100%;
- height: 100%;
+ height:calc(100% - 30px);
}
</style>
--
Gitblit v1.9.3