From 0f6b38dfdfe93a1d630d984417af2fbb03c7e0ff Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Mon, 15 Sep 2025 15:29:26 +0800
Subject: [PATCH] 2
---
src/page/home/components/echart.vue | 180 ++++++++++++++++++++++++++++++++++++------------------------
1 files changed, 108 insertions(+), 72 deletions(-)
diff --git a/src/page/home/components/echart.vue b/src/page/home/components/echart.vue
index d97e5db..0e7d7ce 100644
--- a/src/page/home/components/echart.vue
+++ b/src/page/home/components/echart.vue
@@ -1,87 +1,123 @@
<template>
<div style="width: 100%;height: 100%;">
- <div style="width: 100%;height: 100%;" :id="'main'+ids"></div>
+ <div style="width: 100%;height: 100%;" :id="'main' + ids"></div>
</div>
</template>
<script>
- import * as echarts from 'echarts';
- export default{
- props:{
- ids:{
- type:String,
- default: '0',
+import * as echarts from "echarts";
+import { data } from "jquery";
+export default {
+ props: {
+ ids: {
+ type: String,
+ default: "0"
+ },
+ colorType: {
+ type: Number,
+ default: 0
+ },
+ data: {
+ type: Array,
+ default: () => []
+ }
+ },
+ data() {
+ return {
+ myChart: "",
+ value: Math.random() * 1000,
+ now: new Date(1997, 9, 3),
+ oneDay: 24 * 3600 * 1000
+ };
+ },
+ watch: {
+ data: {
+ handler(newVal, oldVal) {
+ this.initCharts();
},
- colorType:{
- type:Number,
- default: 0,
+ }
+ },
+ methods: {
+ initCharts() {
+ var chartDom = document.getElementById("main" + this.ids);
+ var myChart = echarts.init(chartDom, "dark");
+ var option;
+ var greenOrRed = "";
+ var greenOrReds = "";
+ // console.log(this.colorType);
+ if (this.colorType > 0) {
+ 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)";
}
- },
- data () {
- return {
- myChart:"",
- };
- },
- methods: {
- initCharts () {
- var chartDom = document.getElementById('main'+this.ids);
- var myChart = echarts.init(chartDom, 'dark');
- var option;
- var greenOrRed="";
- var greenOrReds="";
- console.log(this.colorType)
- if(this.colorType>0){
- 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)'
- }
- option = {
- xAxis: {
- show:false,
- type: 'category',
- boundaryGap: false,
-
- },
- yAxis: {
- show:false,
- type: 'value'
- },
- tooltip: {
- show: true,
- extraCssText:'100%;height: 1.5385rem;'
- },
- backgroundColor: 'rgba(0,0,0,0)',
- color: {
- type: 'linear',
- x:0,
- y:0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: greenOrRed // 0% 处的颜色
- }, {
- offset: 1, color: greenOrReds // 100% 处的颜色
- }],
- globalCoord: false // 缺省为 false
- },
- series: [
+ option = {
+ xAxis: {
+ show: false,
+ type: "category",
+ boundaryGap: false
+ },
+ yAxis: {
+ show: false,
+ type: "value",
+ scale: true
+ },
+ tooltip: {
+ show: true,
+ extraCssText: "100%;height: 1.5385rem;"
+ },
+ backgroundColor: "rgba(0,0,0,0)",
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
{
- data: [820, 932, 901, 934, 1000, 900, 1320,820, 932, 901, 934, 1000, 900,],
- type: 'line',
- areaStyle: {}
+ offset: 0,
+ color: greenOrRed // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: greenOrReds // 100% 处的颜色
}
- ]
- };
+ ],
+ globalCoord: false // 缺省为 false
+ },
+ series: [
+ {
+ // data: [820, 932, 901, 934, 1000, 900, 1320, 820, 932, 901, 934, 1000, 900,],
+ data: this.data,
+ type: "line",
+ areaStyle: {}
+ }
+ ]
+ };
- option && myChart.setOption(option);
- }
+ option && myChart.setOption(option);
},
- mounted () {
- this.initCharts();
- window.onresize = function() {
- this.myChart.resize();
+ randomData() {
+ this.now = new Date(+this.now + this.oneDay);
+ this.value = this.value + Math.random() * 21 - 10;
+ return {
+ name: this.now.toString(),
+ value: [
+ [
+ this.now.getFullYear(),
+ this.now.getMonth() + 1,
+ this.now.getDate()
+ ].join("/"),
+ Math.round(this.value)
+ ]
};
}
+ },
+ mounted() {
+ this.initCharts();
+ window.onresize = function() {
+ this.myChart.resize();
+ };
}
+};
</script>
--
Gitblit v1.9.3