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 | 177 +++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 106 insertions(+), 71 deletions(-)
diff --git a/src/page/home/components/echart.vue b/src/page/home/components/echart.vue
index d97e5db..896776e 100644
--- a/src/page/home/components/echart.vue
+++ b/src/page/home/components/echart.vue
@@ -1,87 +1,122 @@
<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',
- },
- colorType:{
- type:Number,
- default: 0,
- }
+import * as echarts from "echarts";
+export default {
+ props: {
+ ids: {
+ type: String,
+ default: "0"
},
- data () {
- return {
- myChart:"",
- };
+ 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)'
- }
- option = {
- xAxis: {
- show:false,
- type: 'category',
- boundaryGap: false,
+ data: {
+ type: Array,
+ default: () => []
+ }
+ },
+ data() {
+ return {
+ myChart: "",
+ value: Math.random() * 1000,
+ now: new Date(1997, 9, 3),
+ oneDay: 24 * 3600 * 1000
+ };
+ },
+ methods: {
+ initCharts() {
+ // let data = [];
+ // for (var i = 0; i < 1000; i++) {
+ // data.push(this.randomData());
+ // }
- },
- 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: [
+ // 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);
+ 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",
+ 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