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/energyBalance/energyBalance/LineChart.vue | 201 +++++++++++++++++++++++++------------------------
1 files changed, 103 insertions(+), 98 deletions(-)
diff --git a/energy_management_ui/src/views/energyBalance/energyBalance/LineChart.vue b/energy_management_ui/src/views/energyBalance/energyBalance/LineChart.vue
index 9613210..61f0f91 100644
--- a/energy_management_ui/src/views/energyBalance/energyBalance/LineChart.vue
+++ b/energy_management_ui/src/views/energyBalance/energyBalance/LineChart.vue
@@ -1,110 +1,115 @@
<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'
- },
- width: {
- type: String,
- default: '100%'
- },
- height: {
- type: String,
- default: '600px'
- },
- chartData: {
- type:Object,
- //required: true
- }
+export default {
+ mixins: [resize],
+ props: {
+ className: {
+ type: String,
+ default: "chart"
},
- watch: {
- chartData: {
- deep: true,
- handler(val) {
- this.setOptions(val)
- }
- }
+ width: {
+ type: String,
+ default: "100%"
},
- data() {
- return {
- chart: null
- }
+ height: {
+ type: String,
+ default: "600px"
},
- mounted() {
- this.$nextTick(() => {
- this.initChart()
- })
- },
- beforeDestroy() {
- if (!this.chart) {
- return
- }
- this.chart.dispose()
- this.chart = null
- },
- methods: {
- initChart() {
- this.chart = echarts.init(this.$el, 'macarons')
- this.setOptions(this.chartData)
- },
- setOptions({actualData,expectedData,title} = {}) {
- this.chart.setOption({
- title: {
- text: '鑳芥簮骞宠 鍒嗘瀽',
- x:'left',
- y: 'top',
- textStyle: {
- color: "#333",
- fontSize:16
- },
- },
- xAxis: {
- data: actualData,
- type: 'category',
- },
- grid: {
- left: 10,
- right: 10,
- bottom: 20,
- top: '15%',
- containLabel: true
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
- },
- padding: [5, 10]
- },
- yAxis: {
- axisTick: {
- show: false
- }
- },
- legend: {
- data: []
- },
- series: [{
- name: title,
- smooth: true,
- type: 'bar',
- barWidth: '60%',
- data: expectedData,
- animationDuration: 2800,
- animationEasing: 'cubicInOut'
- }]
- })
+ chartData: {
+ type: Object
+ //required: true
+ }
+ },
+ watch: {
+ chartData: {
+ deep: true,
+ handler(val) {
+ this.setOptions(val);
}
}
+ },
+ data() {
+ return {
+ chart: null
+ };
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.initChart();
+ });
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return;
+ }
+ this.chart.dispose();
+ this.chart = null;
+ },
+ methods: {
+ initChart() {
+ this.chart = echarts.init(this.$el, "macarons");
+ this.setOptions(this.chartData);
+ },
+ setOptions({ actualData, expectedData, title } = {}) {
+ this.chart.setOption({
+ title: {
+ text: "鑳芥簮骞宠 鍒嗘瀽",
+ x: "left",
+ y: "top",
+ textStyle: {
+ color: "#fff",
+ fontSize: 16
+ }
+ },
+ xAxis: {
+ data: actualData,
+ type: "category"
+ },
+ grid: {
+ left: 10,
+ right: 10,
+ bottom: 20,
+ top: "15%",
+ containLabel: true
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "cross"
+ },
+ padding: [5, 10]
+ },
+ yAxis: {
+ axisTick: {
+ show: false
+ }
+ },
+ legend: {
+ data: [],
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ series: [
+ {
+ name: title,
+ smooth: true,
+ type: "bar",
+ barWidth: "60%",
+ data: expectedData,
+ animationDuration: 2800,
+ animationEasing: "cubicInOut"
+ }
+ ]
+ });
+ }
}
+};
</script>
--
Gitblit v1.9.3