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/workingProcedure/dailyWorkingProcedure/LineChart.vue | 87 +++++++++++++++++++++++--------------------
1 files changed, 46 insertions(+), 41 deletions(-)
diff --git a/energy_management_ui/src/views/workingProcedure/dailyWorkingProcedure/LineChart.vue b/energy_management_ui/src/views/workingProcedure/dailyWorkingProcedure/LineChart.vue
index 44964fd..4354cf8 100644
--- a/energy_management_ui/src/views/workingProcedure/dailyWorkingProcedure/LineChart.vue
+++ b/energy_management_ui/src/views/workingProcedure/dailyWorkingProcedure/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 '../../dashboard/mixins/resize'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "../../dashboard/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: '300px'
+ default: "300px"
},
autoResize: {
type: Boolean,
@@ -34,45 +34,45 @@
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,title } = {}) {
+ setOptions({ expectedData, actualData, title } = {}) {
this.chart.setOption({
title: {
text: title,
- left: 'left',
+ left: "left",
textStyle: {
- color: '#606266',
+ color: "#606266"
}
},
xAxis: {
data: actualData,
- type: 'category',
+ type: "category"
},
grid: {
left: 10,
@@ -82,9 +82,9 @@
containLabel: true
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'cross'
+ type: "cross"
},
padding: [5, 10]
},
@@ -94,27 +94,32 @@
}
},
legend: {
- data: []
+ data: [],
+ textStyle: {
+ color: "#fff"
+ }
},
- series: [{
- name: title,
- itemStyle: {
- normal: {
- color: '#FF005A',
- lineStyle: {
- color: '#FF005A',
- width: 2
+ series: [
+ {
+ name: title,
+ 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"
+ }
+ ]
+ });
}
}
-}
+};
</script>
--
Gitblit v1.9.3