From e1c28921470ca2a82403ef5a7bc07f1c48619b36 Mon Sep 17 00:00:00 2001
From: 刘嘉威 <daidaibg@163.com>
Date: 星期三, 26 十月 2022 16:51:43 +0800
Subject: [PATCH] feat: 增加右上 右中图表
---
src/views/index/right-top.vue | 232 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 225 insertions(+), 7 deletions(-)
diff --git a/src/views/index/right-top.vue b/src/views/index/right-top.vue
index 7df5872..d0e33eb 100644
--- a/src/views/index/right-top.vue
+++ b/src/views/index/right-top.vue
@@ -1,13 +1,231 @@
-<script setup lang='ts'>
+<script setup lang="ts">
+import { ref,onMounted} 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[]) => {
+ 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: "鎶ヨ1娆℃暟",
+ 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: "鎶ヨ1锛歿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: "鎶ヨ2娆℃暟",
+ 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: "鎶ヨ2锛歿c}",
+ borderWidth: 0.5,
+ },
+ },
+ {
+ name: "鏈�澶у��",
+ type: "max",
+ valueDim: "y",
+ symbol: "circle",
+ symbolSize: 6,
+ itemStyle: {
+ color: "#09CAF3",
+ shadowColor: "#09CAF3",
+ shadowBlur: 8,
+ },
+ label: {
+ formatter: "",
+ },
+ },
+ ],
+ },
+ },
+ ],
+ };
+}
+onMounted(()=>{
+ getData();
+
+})
</script>
<template>
- <div class=''>
-
- </div>
+ <v-chart
+ class="chart"
+ :option="option"
+ v-if="JSON.stringify(option) != '{}'"
+ />
</template>
-<style scoped lang='scss'>
-
-</style>
\ No newline at end of file
+<style scoped lang="scss"></style>
--
Gitblit v1.8.0