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/energyPlan/energyForecast/LineChart.vue | 280 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 151 insertions(+), 129 deletions(-)
diff --git a/energy_management_ui/src/views/energyPlan/energyForecast/LineChart.vue b/energy_management_ui/src/views/energyPlan/energyForecast/LineChart.vue
index cab80f2..17dff6b 100644
--- a/energy_management_ui/src/views/energyPlan/energyForecast/LineChart.vue
+++ b/energy_management_ui/src/views/energyPlan/energyForecast/LineChart.vue
@@ -1,140 +1,162 @@
<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'
- const animationDuration = 6000
- export default {
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: 'chart'
- },
- width: {
- type: String,
- default: '100%'
- },
- height: {
- type: String,
- default: '350px'
- },
- chartData: {
- type:Object,
- }
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "../../dashboard/mixins/resize";
+const animationDuration = 6000;
+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,
- seriesData: [],
- }
+ height: {
+ type: String,
+ default: "350px"
},
- 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.chart.setOption({
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
- type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
- }
- },
- title: {
- x:'center',
- y: 'top',
- textStyle: {
- color: "#333"
- },
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
- type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
- }
- },
- grid: {
- top: 40,
- left: '2%',
- right: '2%',
- bottom: '3%',
- containLabel: true
- },
- legend: {
- data:['鐒﹀彴','绮夌鏈�'],
- left: '60%',
- },
- xAxis: [{
- type: 'category',
- data: ['12鏃�','13鏃�','14鏃�','15鏃�','16鏃�','17鏃�','18鏃�','19鏃�','20鏃�'],
- axisPointer: {
- type: 'shadow'
- }
- }],
- yAxis: [{
- name: '',
- type: 'value',
- nameTextStyle:{
- color:"#333",
- },
- axisLabel: {
- formatter: '{value}'
- },
- axisTick: {
- show: false
- },
- },{
- name: '',
- type: 'value',
- nameTextStyle:{
- color:"#333",
- },
- axisLabel: {
- formatter: '{value}'
- },
- axisTick: {
- show: false
- },
- }
- ],
- series:[{
- type: 'bar',
- data: [289,430,350,375,374,204,300,194,184],
- smooth: true,//绾挎潯骞虫粦
- animationDuration: 2800,
- animationEasing: 'quadraticOut'
- },{
- type: 'line',
- yAxisIndex: 1,
- data: [289,430,350,375,374,204,300,194,184],
- animationDuration: 2800,
- animationEasing: 'quadraticOut'
- }]
- })
+ chartData: {
+ type: Object
+ }
+ },
+ watch: {
+ chartData: {
+ deep: true,
+ handler(val) {
+ this.setOptions(val);
}
}
+ },
+ data() {
+ return {
+ chart: null,
+ seriesData: []
+ };
+ },
+ 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.chart.setOption({
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ type: "shadow" // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ }
+ },
+ title: {
+ x: "center",
+ y: "top",
+ textStyle: {
+ color: "#333"
+ }
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ type: "shadow" // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ }
+ },
+ grid: {
+ top: 40,
+ left: "2%",
+ right: "2%",
+ bottom: "3%",
+ containLabel: true
+ },
+ legend: {
+ data: ["鐒﹀彴", "绮夌鏈�"],
+ left: "60%",
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: [
+ "12鏃�",
+ "13鏃�",
+ "14鏃�",
+ "15鏃�",
+ "16鏃�",
+ "17鏃�",
+ "18鏃�",
+ "19鏃�",
+ "20鏃�"
+ ],
+ axisPointer: {
+ type: "shadow"
+ }
+ }
+ ],
+ yAxis: [
+ {
+ name: "",
+ type: "value",
+ nameTextStyle: {
+ color: "#333"
+ },
+ axisLabel: {
+ formatter: "{value}"
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ {
+ name: "",
+ type: "value",
+ nameTextStyle: {
+ color: "#333"
+ },
+ axisLabel: {
+ formatter: "{value}"
+ },
+ axisTick: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ {
+ type: "bar",
+ data: [289, 430, 350, 375, 374, 204, 300, 194, 184],
+ smooth: true, //绾挎潯骞虫粦
+ animationDuration: 2800,
+ animationEasing: "quadraticOut"
+ },
+ {
+ type: "line",
+ yAxisIndex: 1,
+ data: [289, 430, 350, 375, 374, 204, 300, 194, 184],
+ animationDuration: 2800,
+ animationEasing: "quadraticOut"
+ }
+ ]
+ });
+ }
}
+};
</script>
--
Gitblit v1.9.3