From f7a99184725f7ea0884cf478f169aad4e5b6583c Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Sun, 13 Jul 2025 18:27:57 +0800
Subject: [PATCH] 1
---
src/page/home/components/echart.vue | 72 +++++++++++++++++++++---------------
1 files changed, 42 insertions(+), 30 deletions(-)
diff --git a/src/page/home/components/echart.vue b/src/page/home/components/echart.vue
index 28bffa0..896776e 100644
--- a/src/page/home/components/echart.vue
+++ b/src/page/home/components/echart.vue
@@ -4,16 +4,20 @@
</div>
</template>
<script>
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
export default {
props: {
ids: {
type: String,
- default: '0',
+ default: "0"
},
colorType: {
type: Number,
- default: 0,
+ default: 0
+ },
+ data: {
+ type: Array,
+ default: () => []
}
},
data() {
@@ -21,57 +25,61 @@
myChart: "",
value: Math.random() * 1000,
now: new Date(1997, 9, 3),
- oneDay: 24 * 3600 * 1000,
+ oneDay: 24 * 3600 * 1000
};
},
methods: {
initCharts() {
- let data = []
- for (var i = 0; i < 1000; i++) {
- data.push(this.randomData());
- }
+ // 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');
+ // console.log("dadadadad",data);
+
+ 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 +87,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 +102,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 +114,9 @@
},
mounted() {
this.initCharts();
- window.onresize = function () {
+ window.onresize = function() {
this.myChart.resize();
};
}
-}
+};
</script>
--
Gitblit v1.9.3