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/historicalAlarm/LChart.vue | 174 +++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 123 insertions(+), 51 deletions(-)
diff --git a/energy_management_ui/src/views/energyAlarm/historicalAlarm/LChart.vue b/energy_management_ui/src/views/energyAlarm/historicalAlarm/LChart.vue
index ff1e935..56b2573 100644
--- a/energy_management_ui/src/views/energyAlarm/historicalAlarm/LChart.vue
+++ b/energy_management_ui/src/views/energyAlarm/historicalAlarm/LChart.vue
@@ -1,11 +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 {
@@ -13,15 +12,15 @@
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,
@@ -35,37 +34,58 @@
data() {
return {
chart: null
- }
+ };
},
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.dispose();
+ 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 } = {}) {
this.chart.setOption({
xAxis: {
- data: ['04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00' , '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+ data: [
+ "04:00",
+ "05:00",
+ "06:00",
+ "07:00",
+ "08:00",
+ "09:00",
+ "10:00",
+ "11:00",
+ "12:00",
+ "13:00",
+ "14:00",
+ "15:00",
+ "16:00",
+ "17:00",
+ "18:00",
+ "19:00",
+ "20:00",
+ "21:00",
+ "22:00",
+ "23:00"
+ ],
boundaryGap: false,
axisTick: {
show: false
@@ -79,9 +99,9 @@
containLabel: true
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'cross'
+ type: "cross"
},
padding: [5, 10]
},
@@ -91,48 +111,100 @@
}
},
legend: {
- data: ['棰勮鍊�','闄愬��']
+ data: ["棰勮鍊�", "闄愬��"],
+ textStyle: {
+ color: "#fff"
+ }
},
- series: [{
- name: '棰勮鍊�', itemStyle: {
- normal: {
- color: '#FF005A',
- lineStyle: {
- color: '#FF005A',
- width: 2,
-
- },
-
- }
- },
- smooth: true,
- type: 'line',
- data:[200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200],
- animationDuration: 1000,
- animationEasing: 'cubicInOut'
- },
+ series: [
{
- name: '闄愬��',
- smooth: true,
- type: 'line',
+ name: "棰勮鍊�",
itemStyle: {
normal: {
- color: '#3888fa',
+ color: "#FF005A",
lineStyle: {
- color: '#3888fa',
+ color: "#FF005A",
width: 2
- },
- areaStyle: {
- color: '#f3f8ff'
}
}
},
- data:[200, 200, 181, 224,210, 172, 181, 224,210, 172, 181, 224,210, 172, 181, 224,210, 172, 181, 224,210, 172, 181],
+ smooth: true,
+ type: "line",
+ data: [
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200,
+ 200
+ ],
+ animationDuration: 1000,
+ animationEasing: "cubicInOut"
+ },
+ {
+ name: "闄愬��",
+ smooth: true,
+ type: "line",
+ itemStyle: {
+ normal: {
+ color: "#3888fa",
+ lineStyle: {
+ color: "#3888fa",
+ width: 2
+ },
+ areaStyle: {
+ color: "#f3f8ff"
+ }
+ }
+ },
+ data: [
+ 200,
+ 200,
+ 181,
+ 224,
+ 210,
+ 172,
+ 181,
+ 224,
+ 210,
+ 172,
+ 181,
+ 224,
+ 210,
+ 172,
+ 181,
+ 224,
+ 210,
+ 172,
+ 181,
+ 224,
+ 210,
+ 172,
+ 181
+ ],
animationDuration: 800,
- animationEasing: 'quadraticOut'
- }]
- })
+ animationEasing: "quadraticOut"
+ }
+ ]
+ });
}
}
-}
+};
</script>
--
Gitblit v1.9.3