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/keyEquipment/yearkeyEquipment/BarChart.vue | 191 ++++++++++++++++++++++++-----------------------
1 files changed, 99 insertions(+), 92 deletions(-)
diff --git a/energy_management_ui/src/views/keyEquipment/yearkeyEquipment/BarChart.vue b/energy_management_ui/src/views/keyEquipment/yearkeyEquipment/BarChart.vue
index 7198e0f..a157885 100644
--- a/energy_management_ui/src/views/keyEquipment/yearkeyEquipment/BarChart.vue
+++ b/energy_management_ui/src/views/keyEquipment/yearkeyEquipment/BarChart.vue
@@ -1,112 +1,119 @@
<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: '300px'
- },
- autoResize: {
- type: Boolean,
- default: true
- },
- chartData: {
- type: Object,
- required: true
+export default {
+ mixins: [resize],
+ props: {
+ className: {
+ type: String,
+ default: "chart"
+ },
+ width: {
+ type: String,
+ default: "100%"
+ },
+ height: {
+ type: String,
+ default: "300px"
+ },
+ autoResize: {
+ type: Boolean,
+ default: true
+ },
+ chartData: {
+ type: Object,
+ required: true
+ }
+ },
+ data() {
+ return {
+ chart: null
+ };
+ },
+ watch: {
+ chartData: {
+ deep: true,
+ handler(val) {
+ this.setOptions(val);
}
+ }
+ },
+ 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);
},
- data() {
- return {
- chart: null
- }
- },
- watch: {
- chartData: {
- deep: true,
- handler(val) {
- this.setOptions(val)
- }
- }
- },
- 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({ expectedData, actualData,title } = {}) {
- this.chart.setOption({
- title: {
- text: title,
- left: 'left',
- textStyle: {
- color: '#606266',
- }
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
- type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
- }
- },
- grid: {
- left: 10,
- right: 10,
- bottom: 20,
- top: 40,
- containLabel: true
- },
- xAxis: [{
- type: 'category',
+ setOptions({ expectedData, actualData, title } = {}) {
+ this.chart.setOption({
+ title: {
+ text: title,
+ left: "left",
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ type: "shadow" // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ }
+ },
+ grid: {
+ left: 10,
+ right: 10,
+ bottom: 20,
+ top: 40,
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: "category",
data: actualData,
axisTick: {
alignWithLabel: true
}
- }],
- yAxis: [{
- type: 'value',
+ }
+ ],
+ yAxis: [
+ {
+ type: "value",
axisTick: {
show: false
}
- }],
- series: [{
+ }
+ ],
+ series: [
+ {
name: title,
- type: 'bar',
- stack: 'vistors',
- barWidth: '60%',
+ type: "bar",
+ stack: "vistors",
+ barWidth: "60%",
data: expectedData,
animationDuration: 2800,
- animationEasing: 'cubicInOut'
- }]
- });
- }
+ animationEasing: "cubicInOut"
+ }
+ ]
+ });
}
}
+};
</script>
--
Gitblit v1.9.3