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/dashboard/LineChart.vue | 116 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 61 insertions(+), 55 deletions(-)
diff --git a/energy_management_ui/src/views/dashboard/LineChart.vue b/energy_management_ui/src/views/dashboard/LineChart.vue
index e654168..9eb7cc2 100644
--- a/energy_management_ui/src/views/dashboard/LineChart.vue
+++ b/energy_management_ui/src/views/dashboard/LineChart.vue
@@ -1,26 +1,26 @@
<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 resize from './mixins/resize'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
export default {
mixins: [resize],
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,
@@ -34,37 +34,37 @@
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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
boundaryGap: false,
axisTick: {
show: false
@@ -78,9 +78,9 @@
containLabel: true
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'cross'
+ type: "cross"
},
padding: [5, 10]
},
@@ -90,46 +90,52 @@
}
},
legend: {
- data: ['expected', 'actual']
+ data: ["expected", "actual"],
+ textStyle: {
+ color: "#fff"
+ }
},
- series: [{
- name: 'expected', itemStyle: {
- normal: {
- color: '#FF005A',
- lineStyle: {
- color: '#FF005A',
- width: 2
+ series: [
+ {
+ name: "expected",
+ 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: 'actual',
- smooth: true,
- type: 'line',
- itemStyle: {
- normal: {
- color: '#3888fa',
- lineStyle: {
- color: '#3888fa',
- width: 2
- },
- areaStyle: {
- color: '#f3f8ff'
+ {
+ name: "actual",
+ 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