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/monthlyWorkingProcedure/BarChart.vue | 191 ++++++++++++++++++++++++----------------------- 1 files changed, 99 insertions(+), 92 deletions(-) diff --git a/energy_management_ui/src/views/workingProcedure/monthlyWorkingProcedure/BarChart.vue b/energy_management_ui/src/views/workingProcedure/monthlyWorkingProcedure/BarChart.vue index cc9a0a7..44463a5 100644 --- a/energy_management_ui/src/views/workingProcedure/monthlyWorkingProcedure/BarChart.vue +++ b/energy_management_ui/src/views/workingProcedure/monthlyWorkingProcedure/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: { - top: 30, - left: '2%', - right: '2%', - bottom: '3%', - 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: { + top: 30, + left: "2%", + right: "2%", + bottom: "3%", + 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