From 3003b7486ddeffd169f2b2f564fc0ff8c2c58bb3 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Tue, 22 Jul 2025 09:56:04 +0800
Subject: [PATCH] 1
---
src/page/home/components/echart.vue | 75 ++++++++++++++++++++++---------------
1 files changed, 44 insertions(+), 31 deletions(-)
diff --git a/src/page/home/components/echart.vue b/src/page/home/components/echart.vue
index 28bffa0..0e7d7ce 100644
--- a/src/page/home/components/echart.vue
+++ b/src/page/home/components/echart.vue
@@ -4,16 +4,21 @@
</div>
</template>
<script>
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
+import { data } from "jquery";
export default {
props: {
ids: {
type: String,
- default: '0',
+ default: "0"
},
colorType: {
type: Number,
- default: 0,
+ default: 0
+ },
+ data: {
+ type: Array,
+ default: () => []
}
},
data() {
@@ -21,57 +26,61 @@
myChart: "",
value: Math.random() * 1000,
now: new Date(1997, 9, 3),
- oneDay: 24 * 3600 * 1000,
+ oneDay: 24 * 3600 * 1000
};
+ },
+ watch: {
+ data: {
+ handler(newVal, oldVal) {
+ this.initCharts();
+ },
+ }
},
methods: {
initCharts() {
- let data = []
- for (var i = 0; i < 1000; i++) {
- data.push(this.randomData());
- }
-
- var chartDom = document.getElementById('main' + this.ids);
- var myChart = echarts.init(chartDom, 'dark');
+ var chartDom = document.getElementById("main" + this.ids);
+ var myChart = echarts.init(chartDom, "dark");
var option;
var greenOrRed = "";
var greenOrReds = "";
- console.log(this.colorType)
+ // console.log(this.colorType);
if (this.colorType > 0) {
- greenOrRed = 'rgba(65,172,117,0.6)'
- greenOrReds = 'rgba(65,172,117,0.05)'
+ greenOrRed = "rgba(65,172,117,0.6)";
+ greenOrReds = "rgba(65,172,117,0.05)";
} else {
- greenOrRed = 'rgba(166,10,36,0.6)'
- greenOrReds = 'rgba(166,10,36,0.05)'
+ greenOrRed = "rgba(166,10,36,0.6)";
+ greenOrReds = "rgba(166,10,36,0.05)";
}
option = {
xAxis: {
show: false,
- type: 'category',
- boundaryGap: false,
-
+ type: "category",
+ boundaryGap: false
},
yAxis: {
show: false,
- type: 'value'
+ type: "value",
+ scale: true
},
tooltip: {
show: true,
- extraCssText: '100%;height: 1.5385rem;'
+ extraCssText: "100%;height: 1.5385rem;"
},
- backgroundColor: 'rgba(0,0,0,0)',
+ backgroundColor: "rgba(0,0,0,0)",
color: {
- type: 'linear',
+ type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
- offset: 0, color: greenOrRed // 0% 处的颜色
- },
+ offset: 0,
+ color: greenOrRed // 0% 处的颜色
+ },
{
- offset: 1, color: greenOrReds // 100% 处的颜色
+ offset: 1,
+ color: greenOrReds // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
@@ -79,8 +88,8 @@
series: [
{
// data: [820, 932, 901, 934, 1000, 900, 1320, 820, 932, 901, 934, 1000, 900,],
- data,
- type: 'line',
+ data: this.data,
+ type: "line",
areaStyle: {}
}
]
@@ -94,7 +103,11 @@
return {
name: this.now.toString(),
value: [
- [this.now.getFullYear(), this.now.getMonth() + 1, this.now.getDate()].join('/'),
+ [
+ this.now.getFullYear(),
+ this.now.getMonth() + 1,
+ this.now.getDate()
+ ].join("/"),
Math.round(this.value)
]
};
@@ -102,9 +115,9 @@
},
mounted() {
this.initCharts();
- window.onresize = function () {
+ window.onresize = function() {
this.myChart.resize();
};
}
-}
+};
</script>
--
Gitblit v1.9.3