From ce8e5c19f97cef0391828e08f5584c325abd3879 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 04 三月 2024 14:41:22 +0800
Subject: [PATCH] fix:修改路径问题
---
src/views/index/right-top.vue | 425 ++++++++++++++++++++++++++++------------------------
1 files changed, 230 insertions(+), 195 deletions(-)
diff --git a/src/views/index/right-top.vue b/src/views/index/right-top.vue
index d0e33eb..3a6d29a 100644
--- a/src/views/index/right-top.vue
+++ b/src/views/index/right-top.vue
@@ -1,7 +1,8 @@
-<script setup lang="ts">
-import { ref,onMounted} from "vue";
-import { currentGET } from "@/api";
+<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) => {
@@ -16,216 +17,250 @@
}
});
};
-const setOption =async (xData:any[], yData:any[], yData2:any[]) => {
+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",
- },
+ xAxis: {
+ type: "category",
+ data: xData,
+ boundaryGap: false, // 涓嶇暀鐧斤紝浠庡師鐐瑰紑濮�
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(31,99,163,.2)",
},
- 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",
- },
+ },
+ axisLine: {
+ // show:false,
+ lineStyle: {
+ color: "rgba(31,99,163,.1)",
},
- tooltip: {
- trigger: "axis",
- backgroundColor: "rgba(0,0,0,.6)",
- borderColor: "rgba(147, 235, 248, .8)",
- textStyle: {
- color: "#FFF",
- },
+ },
+ axisLabel: {
+ color: "#7EB7FD",
+ fontWeight: "500",
+ },
+ },
+ yAxis: {
+ type: "value",
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(31,99,163,.2)",
},
- grid: {
- //甯冨眬
- show: true,
- left: "10px",
- right: "30px",
- bottom: "10px",
- top: "32px",
- containLabel: true,
- borderColor: "#1F63A3",
+ },
+ axisLine: {
+ lineStyle: {
+ color: "rgba(31,99,163,.1)",
},
- 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: [
+ },
+ 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,
+ [
{
- 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}",
- },
+ offset: 0,
+ color: "rgba(252,144,16,.7)",
},
{
- name: "鏈�澶у��",
- type: "max",
- valueDim: "y",
- symbol: "circle",
- symbolSize: 6,
- itemStyle: {
- color: "#FC9010",
- shadowColor: "#FC9010",
- shadowBlur: 8,
- },
- label: {
- formatter: "",
- },
+ 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}",
+ },
},
- },
- {
- 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
- ),
+ {
+ name: "鏈�澶у��",
+ type: "max",
+ valueDim: "y",
+ symbol: "circle",
+ symbolSize: 6,
+ itemStyle: {
+ color: "#FC9010",
+ shadowColor: "#FC9010",
+ shadowBlur: 8,
+ },
+ label: {
+ formatter: "",
+ },
},
- 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: "",
- },
- },
- ],
- },
- },
- ],
- };
+ ],
+ },
+ },
+ // {
+ // 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();
-
+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>
<v-chart
- class="chart"
- :option="option"
- v-if="JSON.stringify(option) != '{}'"
+ 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>
+<style lang="scss" scoped>
+.chart {
+ height: 50% !important;
+}
+</style>
--
Gitblit v1.8.0