From 0ae83a895e80a4b9777a27f613d721a7e5e2ac18 Mon Sep 17 00:00:00 2001
From: ali <ali9696@163.com>
Date: 星期二, 03 九月 2024 10:18:27 +0800
Subject: [PATCH] 整体样式修改
---
energy_management_ui/src/views/energyAlarm/realTimeAlarm/LineChart.vue | 126 +++++++++++++++++++++--------------------
1 files changed, 65 insertions(+), 61 deletions(-)
diff --git a/energy_management_ui/src/views/energyAlarm/realTimeAlarm/LineChart.vue b/energy_management_ui/src/views/energyAlarm/realTimeAlarm/LineChart.vue
index 5299027..4189cc0 100644
--- a/energy_management_ui/src/views/energyAlarm/realTimeAlarm/LineChart.vue
+++ b/energy_management_ui/src/views/energyAlarm/realTimeAlarm/LineChart.vue
@@ -1,10 +1,10 @@
<template>
- <div :class="className" :style="{height:height,width:width}" />
+ <div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons'); // echarts theme
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
// import resize from './mixins/resize'
export default {
@@ -12,61 +12,60 @@
props: {
className: {
type: String,
- default: 'chart'
+ default: "chart"
},
width: {
type: String,
- default: '100%'
+ default: "100%"
},
height: {
type: String,
- default: '350px'
+ default: "350px"
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
- type: Object,
+ type: Object
// required: true
- },
-
+ }
},
data() {
return {
chart: null,
- alarmLimitName:undefined
- }
+ alarmLimitName: undefined
+ };
},
watch: {
chartData: {
deep: true,
handler(val) {
- this.setOptions(val)
+ this.setOptions(val);
}
}
},
mounted() {
this.$nextTick(() => {
- this.initChart()
- })
+ this.initChart();
+ });
},
beforeDestroy() {
if (!this.chart) {
- return
+ return;
}
this.chart.dispose();
- this.chart = null
+ this.chart = null;
},
methods: {
initChart() {
- this.chart = echarts.init(this.$el, 'macarons');
- this.setOptions(this.chartData)
+ this.chart = echarts.init(this.$el, "macarons");
+ this.setOptions(this.chartData);
},
- setOptions({ expectedData, actualData,timeList } = {}) {
- if(expectedData.length>0){
+ setOptions({ expectedData, actualData, timeList } = {}) {
+ if (expectedData.length > 0) {
this.alarmLimitName = "鎶ヨ闄愬��";
- }else {
+ } else {
this.alarmLimitName = " ";
}
this.chart.setOption({
@@ -85,9 +84,9 @@
containLabel: true
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'cross'
+ type: "cross"
},
padding: [5, 10]
},
@@ -97,48 +96,53 @@
}
},
legend: {
- data: [this.alarmLimitName, '瀹炴椂鍊�']
+ data: [this.alarmLimitName, "瀹炴椂鍊�"],
+ textStyle: {
+ color: "#fff"
+ }
},
- series: [{
- symbol: "none",
- name: '鎶ヨ闄愬��',
- itemStyle: {
- normal: {
- color: '#FF005A',
- lineStyle: {
- color: '#FF005A',
- width: 2
+ series: [
+ {
+ symbol: "none",
+ name: "鎶ヨ闄愬��",
+ itemStyle: {
+ normal: {
+ color: "#FF005A",
+ lineStyle: {
+ color: "#FF005A",
+ width: 2
+ }
}
- }
+ },
+ smooth: true,
+ type: "line",
+ data: expectedData,
+ animationDuration: 2800,
+ animationEasing: "cubicInOut"
},
- smooth: true,
- type: 'line',
- data: expectedData,
- animationDuration: 2800,
- animationEasing: 'cubicInOut'
- },
- {
- name: '瀹炴椂鍊�',
- smooth: true,
- type: 'line',
- itemStyle: {
- normal: {
- color: '#3888fa',
- lineStyle: {
- color: '#3888fa',
- width: 2
- },
- areaStyle: {
- color: '#f3f8ff'
+ {
+ name: "瀹炴椂鍊�",
+ smooth: true,
+ type: "line",
+ itemStyle: {
+ normal: {
+ color: "#3888fa",
+ lineStyle: {
+ color: "#3888fa",
+ width: 2
+ },
+ areaStyle: {
+ color: "#f3f8ff"
+ }
}
- }
- },
- data: actualData,
- animationDuration: 2800,
- animationEasing: 'quadraticOut'
- }]
- })
+ },
+ data: actualData,
+ animationDuration: 2800,
+ animationEasing: "quadraticOut"
+ }
+ ]
+ });
}
}
-}
+};
</script>
--
Gitblit v1.9.3