From 2f6a967029c293b550e5cb8e39de9ae08b345d44 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Tue, 08 Jul 2025 18:33:24 +0800
Subject: [PATCH] 1
---
src/page/home/components/echart.vue | 167 +++++++++++++++++++++++++++++++------------------------
1 files changed, 95 insertions(+), 72 deletions(-)
diff --git a/src/page/home/components/echart.vue b/src/page/home/components/echart.vue
index d97e5db..28bffa0 100644
--- a/src/page/home/components/echart.vue
+++ b/src/page/home/components/echart.vue
@@ -1,87 +1,110 @@
<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',
+ },
+ colorType: {
+ type: Number,
+ default: 0,
+ }
+ },
+ 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());
}
- },
- 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: [
+ 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: [
{
- 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,
+ 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