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/pie_chart.vue | 79 ++++++++++++++++++++------------------- 1 files changed, 41 insertions(+), 38 deletions(-) diff --git a/energy_management_ui/src/views/energyBalance/energyBalance/pie_chart.vue b/energy_management_ui/src/views/energyBalance/energyBalance/pie_chart.vue index 2983152..88ec288 100644 --- a/energy_management_ui/src/views/energyBalance/energyBalance/pie_chart.vue +++ b/energy_management_ui/src/views/energyBalance/energyBalance/pie_chart.vue @@ -1,103 +1,106 @@ <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" } }, data() { return { chart: null - } + }; }, 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.chart = echarts.init(this.$el, "macarons"); this.chart.setOption({ title: { - text: '杈撳嚭鑳介噺鍒嗘瀽', - left: '25%', - textAlign: 'center', + text: "杈撳嚭鑳介噺鍒嗘瀽", + left: "25%", + textAlign: "center", textStyle: { - fontStyle: 'normal', - "color": "#333", - }, + fontStyle: "normal", + color: "#333" + } }, tooltip: { - trigger: 'item', - formatter: '{a} <br/>{b}: {c} ({d}%)' + trigger: "item", + formatter: "{a} <br/>{b}: {c} ({d}%)" }, grid: { - left: '3%', - right: '4%', - bottom: '3%', + left: "3%", + right: "4%", + bottom: "3%", containLabel: true }, legend: { - orient: 'vertical', + orient: "vertical", left: 10, - top:'10%', - data: ['姘磋緭鍏ラ噺', '鐢佃緭鍏ラ噺'] + top: "10%", + data: ["姘磋緭鍏ラ噺", "鐢佃緭鍏ラ噺"], + textStyle: { + color: "#fff" + } }, series: [ { - name: '鑳介噺杈撳嚭', - type: 'pie', - radius: ['30%', '60%'], + name: "鑳介噺杈撳嚭", + type: "pie", + radius: ["30%", "60%"], avoidLabelOverlap: false, label: { show: false, - position: 'center' + position: "center" }, emphasis: { label: { show: true, - fontSize: '16', - fontWeight: 'bold' + fontSize: "16", + fontWeight: "bold" } }, labelLine: { show: false }, data: [ - {value: 340, name: '姘磋緭鍏ラ噺'}, - {value: 150, name: '鐢佃緭鍏ラ噺'} + { value: 340, name: "姘磋緭鍏ラ噺" }, + { value: 150, name: "鐢佃緭鍏ラ噺" } ] } ] - }) + }); } } -} +}; </script> -- Gitblit v1.9.3