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 +++++++-------
src/components/chart/BaseLineChart.vue | 222 +++++++++++++++++
src/components/chart/BasePieChart .vue | 309 +++++++++++++++++++++++
src/components/Screen/left.vue | 13
4 files changed, 633 insertions(+), 99 deletions(-)
diff --git a/src/components/Screen/left.vue b/src/components/Screen/left.vue
index 1faf631..2863288 100644
--- a/src/components/Screen/left.vue
+++ b/src/components/Screen/left.vue
@@ -20,13 +20,16 @@
<!-- 鍏ㄧ悆缁熻娆℃暟 -->
<div class="leftContainer" v-if="GlobleChartDisplay">
<div class="current1" id="leftCurrent1">
- <div class="aside-title">鏁版嵁鐢宠娆℃暟</div>
- <base-bar-chart :project="currProject"></base-bar-chart>
+ <div class="aside-title">椤硅嚜绫诲瀷</div>
+ <base-line-chart :project="currProject"></base-line-chart>
+
+ <!-- <base-bar-chart :project="currProject"></base-bar-chart> -->
<!-- <count-data-apply></count-data-apply> -->
</div>
<div class="current1" id="leftCurrent2">
<div class="aside-title">鐢ㄦ埛璁块棶閲�</div>
- <service-type></service-type>
+ <base-pie-chart :project="currProject"></base-pie-chart>
+ <!-- <service-type></service-type> -->
</div>
<div class="current1" id="leftCurrent3">
<div class="aside-title">椤圭洰瀛樺偍淇℃伅</div>
@@ -59,6 +62,8 @@
import ServiceType from "../chart/ServiceType.vue"
import DataStorage from "../chart/DataStorage.vue"
import BaseBarChart from "../chart/BaseBarChart.vue"
+import BaseLineChart from "../chart/BaseLineChart.vue"
+import BasePieChart from "../chart/BasePieChart .vue"
export default {
components: {
ProjectTree,
@@ -66,6 +71,8 @@
ServiceType,
DataStorage,
BaseBarChart,
+ BaseLineChart,
+ BasePieChart
},
data() {
return {
diff --git a/src/components/chart/BaseLineChart.vue b/src/components/chart/BaseLineChart.vue
new file mode 100644
index 0000000..e2f5995
--- /dev/null
+++ b/src/components/chart/BaseLineChart.vue
@@ -0,0 +1,222 @@
+<template>
+ <div class="linechar" ref="chart"></div>
+</template>
+
+<script>
+import * as echarts from "echarts"
+import {
+ countCountryDimension,
+ countProvinceDimension,
+ GetServicesVisitsCount,
+} from "@/api/screen.js"
+export default {
+ props: {
+ width: {
+ type: String,
+ default: "100%",
+ },
+ height: {
+ type: String,
+ default: "100%",
+ },
+ autoResize: {
+ type: Boolean,
+ default: true,
+ },
+ // option: {
+ // type: Object,
+ // required: true
+ // },
+ type: {
+ type: String,
+ default: "canvas",
+ },
+ project: {
+ type: String,
+ default: "鍏ㄥ浗椤圭洰",
+ },
+ },
+ data() {
+ return {
+ chart: null,
+ dataList: [],
+ }
+ },
+ computed: {
+ option() {
+ let xAxis = []
+ let yAxis = []
+
+ this.dataList.forEach(item => {
+ xAxis.push(item.type)
+ yAxis.push(item.count)
+ })
+
+ // let data = [220, 182, 191, 234, 290, 330, 310]
+ // const sideData = data.map(item => {
+ // return {
+ // name: item.name,
+ // value: item.number,
+ // }
+ // })
+
+ let option = {
+ tooltip: {
+ trigger: "axis",
+ },
+ grid: {
+ right: "5%",
+ top: '10%',
+ left: "5%",
+ bottom: "17%",
+ containLabel: true
+ },
+
+ xAxis: {
+ type: "category",
+ boundaryGap: true,
+ axisLine: {
+ lineStyle: {
+ color: "#fff",
+ },
+ },
+ nameRotate: 45,
+ axisTick: {
+ alignWithLabel: true,
+ },
+ axisLabel: {
+ fontFamily: "PingFangSC-Regular",
+ },
+ data: xAxis,
+ },
+ yAxis: {
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: "#fff",
+ },
+ },
+ axisLabel: {
+ fontFamily: "Roboto-Regular",
+ },
+ axisTick: {
+ show: false,
+ },
+ // 鍒嗗壊绾�
+ splitLine: {
+ lineStyle: {
+ color: "#5d7289",
+ width: 1,
+ type: "dashed",
+ },
+ },
+ type: "value",
+ },
+ series: [
+ {
+ name: "鏈嶅姟璁块棶娆℃暟",
+ type: "line",
+ showAllSymbol: false,
+ lineStyle: {
+ color: "#2579D8",
+ },
+ itemStyle: {
+ color: "#2579D8",
+ },
+ smooth: 0.2,
+ data: yAxis,
+ },
+ ],
+ }
+
+ return option
+ },
+ },
+ watch: {
+ option: {
+ deep: true,
+ handler(newVal) {
+ this.setOptions(newVal)
+ },
+ },
+ project: {
+ deep: true,
+ handler(newVal) {
+ let requsetFn = null
+ switch (newVal) {
+ case "鍏ㄧ悆椤圭洰":
+ requsetFn = countCountryDimension
+ break
+ case "鍏ㄥ浗椤圭洰":
+ requsetFn = countProvinceDimension
+ break
+
+ default:
+ break
+ }
+ this.initData(requsetFn)
+ this.setOptions(this.option)
+ },
+ },
+ },
+ mounted() {
+ this.initData()
+ this.initChart()
+ if (this.autoResize) {
+ window.addEventListener("resize", this.resizeHandler)
+ }
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return
+ }
+ if (this.autoResize) {
+ window.removeEventListener("resize", this.resizeHandler)
+ }
+ this.chart.dispose()
+ this.chart = null
+ },
+ methods: {
+ resizeHandler() {
+ this.chart.resize()
+ },
+ initChart() {
+ this.chart = echarts.init(this.$refs.chart, "", {
+ renderer: this.type,
+ })
+ this.chart.setOption(this.option)
+ this.chart.on("click", this.handleClick)
+ },
+ handleClick(params) {
+ this.$emit("click", params)
+ },
+ setOptions(option) {
+ this.clearChart()
+ this.resizeHandler()
+ if (this.chart) {
+ this.chart.setOption(option)
+ }
+ },
+ refresh() {
+ this.setOptions(this.option)
+ },
+ clearChart() {
+ this.chart && this.chart.clear()
+ },
+ async initData(requsetFn = GetServicesVisitsCount) {
+ const res = await requsetFn()
+ if (res.code == 200) {
+ this.dataList = res.result
+ console.log("requsetFn", res)
+ }
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.linechar {
+ width: 100%;
+ height: 100%;
+}
+</style>
diff --git a/src/components/chart/BasePieChart .vue b/src/components/chart/BasePieChart .vue
new file mode 100644
index 0000000..764f592
--- /dev/null
+++ b/src/components/chart/BasePieChart .vue
@@ -0,0 +1,309 @@
+<template>
+ <div class="piechar" ref="chart"></div>
+</template>
+
+<script>
+import * as echarts from "echarts"
+import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"
+export default {
+ props: {
+ width: {
+ type: String,
+ default: "100%",
+ },
+ height: {
+ type: String,
+ default: "100%",
+ },
+ autoResize: {
+ type: Boolean,
+ default: true,
+ },
+ // option: {
+ // type: Object,
+ // required: true
+ // },
+ type: {
+ type: String,
+ default: "canvas",
+ },
+ project: {
+ type: String,
+ default: "鍏ㄥ浗椤圭洰",
+ },
+ },
+ data() {
+ return {
+ chart: null,
+ dataList: [],
+ }
+ },
+ computed: {
+ option() {
+ let echartData = [
+ {
+ value: 2154,
+ name: "鏇查槣甯堣寖澶у",
+ },
+ {
+ value: 3854,
+ name: "娼嶅潑瀛﹂櫌",
+ },
+ {
+ value: 3515,
+ name: "闈掑矝鑱屼笟鎶�鏈闄�",
+ },
+ {
+ value: 3515,
+ name: "娣勫崥甯堣寖楂樼瓑涓撶",
+ },
+ {
+ value: 3854,
+ name: "椴佷笢澶у",
+ },
+ {
+ value: 2154,
+ name: "灞变笢甯堣寖澶у",
+ },
+ ]
+ let data = []
+ let xAxisData = []
+ let yAxisData = []
+ let count = 0
+ if (this.dataList) {
+ data = this.dataList
+ echartData = data.map(item => {
+ let name = item.province || item.country
+ // xAxisData.push(name)
+ // yAxisData.push(item.count)
+ count += item.count
+ return {
+ name: name,
+ value: item.count,
+ }
+ })
+ }
+
+ var scale = 1
+
+ var rich = {
+ yellow: {
+ color: "#ffc72b",
+ fontSize: 18 * scale,
+ padding: [5, 4],
+ align: "center",
+ },
+ total: {
+ color: "#ffc72b",
+ fontSize: 40 * scale,
+ align: "center",
+ },
+ white: {
+ color: "#fff",
+ align: "center",
+ fontSize: 14 * scale,
+ padding: [5, 0],
+ },
+ blue: {
+ color: "#49dff0",
+ fontSize: 16 * scale,
+ align: "center",
+ },
+ hr: {
+ borderColor: "#0b5263",
+ width: "100%",
+ borderWidth: 1,
+ height: 0,
+ },
+ }
+ let option = {
+ backgroundColor: "transparent",
+ grid: {
+ left: "1%", // 涓庡鍣ㄥ乏渚х殑璺濈
+ right: "1%", // 涓庡鍣ㄥ彸渚х殑璺濈
+ top: "1%", // 涓庡鍣ㄩ《閮ㄧ殑璺濈
+ bottom: "1%", // 涓庡鍣ㄥ簳閮ㄧ殑璺濈
+ containLabel: true,
+
+ },
+ title: {
+ text: "鎬绘暟",
+ left: "center",
+ top: "45%",
+ padding: [0, 0],
+ textStyle: {
+ color: "#fff",
+ fontSize: 18 * scale,
+ align: "center",
+ },
+ subtext: count,
+ subtextStyle: {
+ align: "center",
+ fontSize: 20,
+ color: "#ffc72b",
+ fontWeight: 400,
+ fontFamily: "YouSheBiaoTiHei",
+ },
+ },
+
+ // legend: {
+ // selectedMode: false,
+ // formatter: function (name) {
+ // var total = 0
+ // return "{total|" + total + "}"
+ // },
+ // data: [],
+ // // itemGap: 50,
+ // left: "center",
+ // top: "center",
+ // icon: "none",
+ // align: "center",
+ // textStyle: {
+ // color: "#fff",
+ // fontSize: 16 * scale,
+ // rich: rich,
+ // },
+ // },
+ series: [
+ {
+ name: "",
+ type: "pie",
+ radius: ["42%", "50%"],
+ hoverAnimation: false,
+ color: [
+ "#c487ee",
+ "#deb140",
+ "#49dff0",
+ "#034079",
+ "#6f81da",
+ "#00ffb4",
+ ],
+ minAngle: 30, //鏈�灏忚搴�
+ startAngle: 270, //璧峰瑙掑害
+ label: {
+ normal: {
+ formatter: function (params, ticket, callback) {
+ var total = 0 //鑰冪敓鎬绘暟閲�
+ var percent = 0 //鑰冪敓鍗犳瘮
+ echartData.forEach(function (value, index, array) {
+ total += value.value
+ })
+ percent = ((params.value / total) * 100).toFixed(1)
+ return (
+ "{white|" +
+ params.name +
+ "}\n{hr|}\n{yellow|" +
+ params.value +
+ "}\n{blue|" +
+ percent +
+ "%}"
+ )
+ },
+ rich: rich,
+ },
+ },
+ labelLine: {
+ normal: {
+ length: 55 * scale,
+ length2: 0,
+ lineStyle: {
+ color: "#0b5263",
+ },
+ },
+ },
+ data: echartData,
+ },
+ ],
+ }
+
+ return option
+ },
+ },
+ watch: {
+ option: {
+ deep: true,
+ handler(newVal) {
+ this.setOptions(newVal)
+ },
+ },
+ project: {
+ deep: true,
+ handler(newVal) {
+ let requsetFn = null
+ switch (newVal) {
+ case "鍏ㄧ悆椤圭洰":
+ requsetFn = countCountryDimension
+ break
+ case "鍏ㄥ浗椤圭洰":
+ requsetFn = countProvinceDimension
+ break
+
+ default:
+ break
+ }
+ this.initData(requsetFn)
+ this.setOptions(this.option)
+ },
+ },
+ },
+ mounted() {
+ this.initData()
+ this.initChart()
+ if (this.autoResize) {
+ window.addEventListener("resize", this.resizeHandler)
+ }
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return
+ }
+ if (this.autoResize) {
+ window.removeEventListener("resize", this.resizeHandler)
+ }
+ this.chart.dispose()
+ this.chart = null
+ },
+ methods: {
+ resizeHandler() {
+ this.chart.resize()
+ },
+ initChart() {
+ this.chart = echarts.init(this.$refs.chart, "", {
+ renderer: this.type,
+ })
+ this.chart.setOption(this.option)
+ this.chart.on("click", this.handleClick)
+ },
+ handleClick(params) {
+ this.$emit("click", params)
+ },
+ setOptions(option) {
+ this.clearChart()
+ this.resizeHandler()
+ if (this.chart) {
+ this.chart.setOption(option)
+ }
+ },
+ refresh() {
+ this.setOptions(this.option)
+ },
+ clearChart() {
+ this.chart && this.chart.clear()
+ },
+ async initData(requsetFn = countCountryDimension) {
+ const res = await requsetFn()
+ if (res.code == 200) {
+ this.dataList = res.result
+ console.log("requsetFn", res)
+ }
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.piechar {
+ width: 100%;
+ height: 100%;
+}
+</style>
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