From 5aec569c9d67c86819010171bc527afede505fe5 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期四, 23 二月 2023 18:51:48 +0800
Subject: [PATCH] 管网一张图对接接口数据
---
src/components/chart/ServiceType.vue | 73 +++++++++++++++++++++---------------
1 files changed, 42 insertions(+), 31 deletions(-)
diff --git a/src/components/chart/index.vue b/src/components/chart/ServiceType.vue
similarity index 80%
rename from src/components/chart/index.vue
rename to src/components/chart/ServiceType.vue
index c0d1e5d..d84e8be 100644
--- a/src/components/chart/index.vue
+++ b/src/components/chart/ServiceType.vue
@@ -4,7 +4,7 @@
<script>
import * as echarts from "echarts"
-
+import { countDataVisit } from "@/api/screen.js"
export default {
data() {
return {}
@@ -13,15 +13,8 @@
this.initChart()
},
methods: {
- initChart() {
- const chart = echarts.init(this.$refs.chart)
-
- chart.setOption(option)
- window.addEventListener("resize", function () {
- chart.resize()
- })
- },
- initData() {
+ async initChart() {
+ const res = await countDataVisit()
let dataPie = [
{
value: 410,
@@ -56,15 +49,26 @@
name: "涓汉5",
},
]
+ let count = 0
+ if (res.code == 200) {
+ dataPie = res.result.map(item => {
+ count += item.count
+ return {
+ value: item.count,
+ name: item.modular1,
+ }
+ })
+ }
+
let colorPie = ["#5f6d86", "#0b2036", "#002e49"]
let colorWrap = [
+ "#006CFF",
"#3087d6",
"#afe1ff",
"#4be1ff",
- "#006CFF",
"#5C7AAE",
"#15D0FF",
- "#00BAFF",
+ "#7f44bb",
"#9BD3FF",
]
let baseDataPie = [],
@@ -87,7 +91,7 @@
itemStyle: {
normal: {
color: colorWrap[i],
- borderWidth: 5,
+ borderWidth: 4,
borderColor: colorWrap[i],
shadowBlur: 5,
shadowColor: "rgba(48, 135, 214, 0.3)",
@@ -109,35 +113,36 @@
}
let option = {
- backgroundColor: "#021228",
+ backgroundColor: "transparent",
title: {
text: "鏈嶅姟绫诲瀷鎬绘暟閲�",
- subtext: "10,225",
+ subtext: count,
textStyle: {
- color: "#00b5f3",
+ color: "#fff",
fontSize: 12,
},
subtextStyle: {
align: "center",
- fontSize: 18,
- color: ["#85c7e3"],
- fontWeight: 800,
+ fontSize: 20,
+ color: ["#fff"],
+ fontWeight: 400,
+ fontFamily: "YouSheBiaoTiHei",
},
x: "20%",
y: "40%",
},
- tooltip: {
- show: true,
- // trigger: "item",
- // formatter: "{a}锛歿b} <br/>鍗犳瘮锛歿d}%",
- },
+ // tooltip: {
+ // show: true,
+ // // trigger: "item",
+ // // formatter: "{a}锛歿b} <br/>鍗犳瘮锛歿d}%",
+ // },
legend: {
- data: ["浼佷笟", "鏀垮簻", "涓汉"],
+ data: dataPie,
icon: "vertical",
right: "1%",
- top: "center",
+ top: "10%",
orient: "vertical",
- itemGap: 20,
+ itemGap: 7,
itemWidth: 12,
itemHeight: 3,
@@ -148,11 +153,11 @@
target = dataPie[i].value
}
}
- let arr = [name, target]
- return arr.join("\n")
+ let arr = `${name} |${target}`
+ return arr
},
textStyle: {
- lineHeight: 20,
+ lineHeight: 15,
color: "#9ed2f5",
},
},
@@ -181,7 +186,7 @@
data: baseDataWrap,
},
{
- name: "鎶ヨ",
+ name: "鏈嶅姟绫诲瀷",
type: "pie",
color: "#5F6D86",
selectedMode: "single",
@@ -198,6 +203,12 @@
},
],
}
+ const chart = echarts.init(this.$refs.chart)
+
+ chart.setOption(option)
+ window.addEventListener("resize", function () {
+ chart.resize()
+ })
},
},
}
--
Gitblit v1.9.3