From 510c50da32ba5bdc16e912b1c893000a45dc6305 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期四, 23 二月 2023 09:46:19 +0800
Subject: [PATCH] 修改各类数据存储分布图表
---
src/components/chart/index.vue | 211 ++++++++++++++++++++++++++++++++++++++++++
src/views/Thematic/index.vue | 39 +++++--
src/components/Screen/right.vue | 16 +--
3 files changed, 245 insertions(+), 21 deletions(-)
diff --git a/src/components/Screen/right.vue b/src/components/Screen/right.vue
index ddbb73c..f99994d 100644
--- a/src/components/Screen/right.vue
+++ b/src/components/Screen/right.vue
@@ -11,7 +11,8 @@
</div>
<div class="current1">
<div class="aside-title">鍚勭被鏁版嵁瀛樺偍鍒嗗竷</div>
- <echart13></echart13>
+ <!-- <echart13></echart13> -->
+ <chart></chart>
</div>
</div>
<div class="rightarrow">
@@ -23,11 +24,14 @@
import echart11 from "@/components/echart11.vue"
import echart12 from "@/components/echart12.vue"
import echart13 from "@/components/echart13.vue"
+import chart from "@/components/chart/index.vue"
+
export default {
components: {
echart11,
echart12,
echart13,
+ chart
},
data() {
return {
@@ -82,16 +86,6 @@
background: url(../../assets/img/Screen/chartbg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
- }
- .aside-title {
- padding-left: 30px;
- height: 27px;
- line-height: 27px;
- background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
- font-size: 15px;
- font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
- -webkit-background-clip: text;
- color: #fff;
}
}
}
diff --git a/src/components/chart/index.vue b/src/components/chart/index.vue
new file mode 100644
index 0000000..c0d1e5d
--- /dev/null
+++ b/src/components/chart/index.vue
@@ -0,0 +1,211 @@
+<template>
+ <div class="echart" ref="chart"></div>
+</template>
+
+<script>
+import * as echarts from "echarts"
+
+export default {
+ data() {
+ return {}
+ },
+ mounted() {
+ this.initChart()
+ },
+ methods: {
+ initChart() {
+ const chart = echarts.init(this.$refs.chart)
+
+ chart.setOption(option)
+ window.addEventListener("resize", function () {
+ chart.resize()
+ })
+ },
+ initData() {
+ let dataPie = [
+ {
+ value: 410,
+ name: "浼佷笟",
+ },
+ {
+ value: 380,
+ name: "鏀垮簻",
+ },
+ {
+ value: 50,
+ name: "涓汉",
+ },
+ {
+ value: 50,
+ name: "涓汉1",
+ },
+ {
+ value: 50,
+ name: "涓汉2",
+ },
+ {
+ value: 50,
+ name: "涓汉3",
+ },
+ {
+ value: 50,
+ name: "涓汉4",
+ },
+ {
+ value: 50,
+ name: "涓汉5",
+ },
+ ]
+ let colorPie = ["#5f6d86", "#0b2036", "#002e49"]
+ let colorWrap = [
+ "#3087d6",
+ "#afe1ff",
+ "#4be1ff",
+ "#006CFF",
+ "#5C7AAE",
+ "#15D0FF",
+ "#00BAFF",
+ "#9BD3FF",
+ ]
+ let baseDataPie = [],
+ baseDataWrap = []
+ for (var i = 0; i < dataPie.length; i++) {
+ baseDataPie.push({
+ value: dataPie[i].value,
+ name: dataPie[i].name,
+ itemStyle: {
+ normal: {
+ borderWidth: 0.5,
+ borderColor: "#5f6d86",
+ },
+ },
+ })
+ baseDataWrap.push(
+ {
+ value: dataPie[i].value,
+ name: dataPie[i].name,
+ itemStyle: {
+ normal: {
+ color: colorWrap[i],
+ borderWidth: 5,
+ borderColor: colorWrap[i],
+ shadowBlur: 5,
+ shadowColor: "rgba(48, 135, 214, 0.3)",
+ },
+ },
+ },
+ {
+ value: 30,
+ name: "",
+ itemStyle: {
+ normal: {
+ color: "transparent",
+ borderWidth: 20,
+ borderColor: "transparent",
+ },
+ },
+ }
+ )
+ }
+
+ let option = {
+ backgroundColor: "#021228",
+ title: {
+ text: "鏈嶅姟绫诲瀷鎬绘暟閲�",
+ subtext: "10,225",
+ textStyle: {
+ color: "#00b5f3",
+ fontSize: 12,
+ },
+ subtextStyle: {
+ align: "center",
+ fontSize: 18,
+ color: ["#85c7e3"],
+ fontWeight: 800,
+ },
+ x: "20%",
+ y: "40%",
+ },
+ tooltip: {
+ show: true,
+ // trigger: "item",
+ // formatter: "{a}锛歿b} <br/>鍗犳瘮锛歿d}%",
+ },
+ legend: {
+ data: ["浼佷笟", "鏀垮簻", "涓汉"],
+ icon: "vertical",
+ right: "1%",
+ top: "center",
+ orient: "vertical",
+ itemGap: 20,
+ itemWidth: 12,
+ itemHeight: 3,
+
+ formatter: function (name) {
+ let target
+ for (let i = 0; i < dataPie.length; i++) {
+ if (dataPie[i].name === name) {
+ target = dataPie[i].value
+ }
+ }
+ let arr = [name, target]
+ return arr.join("\n")
+ },
+ textStyle: {
+ lineHeight: 20,
+ color: "#9ed2f5",
+ },
+ },
+ grid: {
+ left: "1%", // 涓庡鍣ㄥ乏渚х殑璺濈
+ right: "1%", // 涓庡鍣ㄥ彸渚х殑璺濈
+ top: "1%", // 涓庡鍣ㄩ《閮ㄧ殑璺濈
+ bottom: "1%", // 涓庡鍣ㄥ簳閮ㄧ殑璺濈
+ },
+ series: [
+ {
+ name: "",
+ type: "pie",
+ clockWise: false, //椤烘椂鍔犺浇
+ hoverAnimation: false, //榧犳爣绉诲叆鍙樺ぇ
+ center: ["30%", "50%"],
+ radius: ["60%", "65%"],
+ tooltip: {
+ show: false,
+ },
+ label: {
+ normal: {
+ show: false,
+ },
+ },
+ data: baseDataWrap,
+ },
+ {
+ name: "鎶ヨ",
+ type: "pie",
+ color: "#5F6D86",
+ selectedMode: "single",
+ center: ["30%", "50%"],
+ radius: ["73%", "74%"],
+ hoverAnimation: false,
+ label: {
+ normal: {
+ show: false,
+ },
+ },
+
+ data: baseDataPie,
+ },
+ ],
+ }
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.echart {
+ width: 100%;
+ height: 100%;
+}
+</style>
diff --git a/src/views/Thematic/index.vue b/src/views/Thematic/index.vue
index 98cb5a5..8806e59 100644
--- a/src/views/Thematic/index.vue
+++ b/src/views/Thematic/index.vue
@@ -3,13 +3,16 @@
<mapsdk></mapsdk>
<top class="title" ref="title"></top>
<left class="mapleft" :style="{ width: leftWidth }" ref="mapleft"></left>
- <right class="mapright" :style="{ width: rightWidth }" ref="mapright"></right>
+ <right
+ class="mapright"
+ :style="{ width: rightWidth }"
+ ref="mapright"
+ ></right>
<bottom class="mapbottom" ref="mapbottom"></bottom>
-</div>
+ </div>
</template>
<script>
-
import mapsdk from "@/components/Screen/mapsdk.vue"
import top from "../../components/Screen/top.vue"
import left from "@/components/Screen/left.vue"
@@ -25,8 +28,8 @@
rightWidth: "20%",
}
},
- mounted() { },
- created() { },
+ mounted() {},
+ created() {},
methods: {
//淇敼宸︿晶瀹藉害
ChangeWidth(parm) {
@@ -36,10 +39,10 @@
} else {
this.leftWidth = "20%"
}
- };
- if (parm == "leftView" || parm == "leftTree") { this.leftWidth = "20%" }
-
-
+ }
+ if (parm == "leftView" || parm == "leftTree") {
+ this.leftWidth = "20%"
+ }
if (parm == "right") {
if (this.rightWidth == "20%") {
@@ -95,4 +98,20 @@
height: 90px;
width: 100%;
z-index: 999;
-}</style>
+}
+</style>
+
+<style lang="less">
+.themaic {
+ .aside-title {
+ padding-left: 30px;
+ height: 27px;
+ line-height: 27px;
+ background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
+ font-size: 15px;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
+ -webkit-background-clip: text;
+ color: #fff;
+ }
+}
+</style>
--
Gitblit v1.9.3