From 773e59cdc3571ad0815f286bb8895a3f27a28961 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 01 三月 2024 16:01:23 +0800
Subject: [PATCH] Merge branch 'master' of http://42.193.1.25:9521/r/~xiaohui/daoAnOffice
---
src/views/index/right-top.vue | 267 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 260 insertions(+), 7 deletions(-)
diff --git a/src/views/index/right-top.vue b/src/views/index/right-top.vue
index 7df5872..3a6d29a 100644
--- a/src/views/index/right-top.vue
+++ b/src/views/index/right-top.vue
@@ -1,13 +1,266 @@
-<script setup lang='ts'>
+<script lang="ts" setup>
+import {onMounted, ref} from "vue";
+import {currentGET} from "@/api";
+import {graphic} from "echarts/core"
+const option = ref({});
+const getData = () => {
+ currentGET("rightTop", {}).then((res) => {
+ console.log("鎶ヨ娆℃暟 ", res);
+ if (res.success) {
+ setOption(res.data.dateList, res.data.numList, res.data.numList2);
+ } else {
+ window["$message"]({
+ text: res.msg,
+ type: "warning",
+ });
+ }
+ });
+};
+const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
+ console.log(xData, yData, yData2)
+ option.value = {
+ xAxis: {
+ type: "category",
+ data: xData,
+ boundaryGap: false, // 涓嶇暀鐧斤紝浠庡師鐐瑰紑濮�
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(31,99,163,.2)",
+ },
+ },
+ axisLine: {
+ // show:false,
+ lineStyle: {
+ color: "rgba(31,99,163,.1)",
+ },
+ },
+ axisLabel: {
+ color: "#7EB7FD",
+ fontWeight: "500",
+ },
+ },
+ yAxis: {
+ type: "value",
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(31,99,163,.2)",
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: "rgba(31,99,163,.1)",
+ },
+ },
+ axisLabel: {
+ color: "#7EB7FD",
+ fontWeight: "500",
+ },
+ },
+ tooltip: {
+ trigger: "axis",
+ backgroundColor: "rgba(0,0,0,.6)",
+ borderColor: "rgba(147, 235, 248, .8)",
+ textStyle: {
+ color: "#FFF",
+ },
+ },
+ grid: {
+ //甯冨眬
+ show: true,
+ left: "10px",
+ right: "30px",
+ bottom: "10px",
+ top: "32px",
+ containLabel: true,
+ borderColor: "#1F63A3",
+ },
+ series: [
+ {
+ data: yData,
+ type: "line",
+ smooth: true,
+ symbol: "none", //鍘婚櫎鐐�
+ name: "鎺掑悕",
+ color: "rgba(252,144,16,.7)",
+ areaStyle: {
+ //鍙筹紝涓嬶紝宸︼紝涓�
+ color: new graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(252,144,16,.7)",
+ },
+ {
+ offset: 1,
+ color: "rgba(252,144,16,.0)",
+ },
+ ],
+ false
+ ),
+ },
+ markPoint: {
+ data: [
+ {
+ name: "鏈�澶у��",
+ type: "max",
+ valueDim: "y",
+ symbol: "rect",
+ symbolSize: [60, 26],
+ symbolOffset: [0, -20],
+ itemStyle: {
+ color: "rgba(0,0,0,0)",
+ },
+ label: {
+ color: "#FC9010",
+ backgroundColor: "rgba(252,144,16,0.1)",
+ borderRadius: 6,
+ padding: [7, 14],
+ borderWidth: 0.5,
+ borderColor: "rgba(252,144,16,.5)",
+ formatter: "鎺掑悕锛歿c}",
+ },
+ },
+ {
+ name: "鏈�澶у��",
+ type: "max",
+ valueDim: "y",
+ symbol: "circle",
+ symbolSize: 6,
+ itemStyle: {
+ color: "#FC9010",
+ shadowColor: "#FC9010",
+ shadowBlur: 8,
+ },
+ label: {
+ formatter: "",
+ },
+ },
+ ],
+ },
+ },
+ // {
+ // data: yData2,
+ // type: "line",
+ // smooth: true,
+ // symbol: "none", //鍘婚櫎鐐�
+ // name: "鎸囨暟",
+ // color: "rgba(9,202,243,.7)",
+ // areaStyle: {
+ // //鍙筹紝涓嬶紝宸︼紝涓�
+ // color: new graphic.LinearGradient(
+ // 0,
+ // 0,
+ // 0,
+ // 1,
+ // [
+ // {
+ // offset: 0,
+ // color: "rgba(9,202,243,.7)",
+ // },
+ // {
+ // offset: 1,
+ // color: "rgba(9,202,243,.0)",
+ // },
+ // ],
+ // false
+ // ),
+ // },
+ // markPoint: {
+ // data: [
+ // {
+ // name: "鏈�澶у��",
+ // type: "max",
+ // valueDim: "y",
+ // symbol: "rect",
+ // symbolSize: [60, 26],
+ // symbolOffset: [0, -20],
+ // itemStyle: {
+ // color: "rgba(0,0,0,0)",
+ // },
+ // label: {
+ // color: "#09CAF3",
+ // backgroundColor: "rgba(9,202,243,0.1)",
+ //
+ // borderRadius: 6,
+ // borderColor: "rgba(9,202,243,.5)",
+ // padding: [7, 14],
+ // formatter: "鎸囨暟锛歿c}",
+ // borderWidth: 0.5,
+ // },
+ // },
+ // {
+ // name: "鏈�澶у��",
+ // type: "max",
+ // valueDim: "y",
+ // symbol: "circle",
+ // symbolSize: 6,
+ // itemStyle: {
+ // color: "#09CAF3",
+ // shadowColor: "#09CAF3",
+ // shadowBlur: 8,
+ // },
+ // label: {
+ // formatter: "",
+ // },
+ // },
+ // ],
+ // },
+ // },
+ ],
+ };
+}
+onMounted(() => {
+ // getData();
+ let xdata = [
+ "2021-11",
+ "2021-12",
+ "2022-01",
+ "2022-02",
+ "2022-03",
+ "2022-04"
+ ]
+ let ydata = [
+ 291,
+ 400,
+ 467,
+ 502,
+ 929,
+ 718
+ ]
+ let ydata1 = [
+ 934,
+ 354,
+ 541,
+ 26,
+ 951,
+ 727
+ ]
+ setOption(xdata, ydata, ydata1)
+})
</script>
<template>
- <div class=''>
-
- </div>
+ <v-chart
+ v-if="JSON.stringify(option) != '{}'"
+ :option="option"
+ class="chart"
+ />
+ <v-chart
+ v-if="JSON.stringify(option) != '{}'"
+ :option="option"
+ class="chart"
+ />
</template>
-<style scoped lang='scss'>
-
-</style>
\ No newline at end of file
+<style lang="scss" scoped>
+.chart {
+ height: 50% !important;
+}
+</style>
--
Gitblit v1.8.0