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/energyLoss/PieChart.vue | 161 +++++++++++++++++++++++++++--------------------------
1 files changed, 81 insertions(+), 80 deletions(-)
diff --git a/energy_management_ui/src/views/energyBalance/energyLoss/PieChart.vue b/energy_management_ui/src/views/energyBalance/energyLoss/PieChart.vue
index ca0a891..45c9519 100644
--- a/energy_management_ui/src/views/energyBalance/energyLoss/PieChart.vue
+++ b/energy_management_ui/src/views/energyBalance/energyLoss/PieChart.vue
@@ -1,29 +1,29 @@
<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: '600px'
+ default: "600px"
},
chartData: {
- type:Object,
+ type: Object
//required: true
}
},
@@ -31,120 +31,121 @@
chartData: {
deep: true,
handler(val) {
- this.setOptions(val)
+ this.setOptions(val);
}
}
},
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.setOptions(this.chartData)
+ this.chart = echarts.init(this.$el, "macarons");
+ this.setOptions(this.chartData);
},
- setOptions({actualData,expectedData,title,total} = {}) {
+ setOptions({ actualData, expectedData, title, total } = {}) {
this.chart.setOption({
title: {
- text: title+"浜у嚭锛�"+total,
- x:'left',
- y: 'top',
+ text: (title || "") + " " + total,
+ x: "left",
+ y: "top",
textStyle: {
- color: "#333"
- },
+ color: "#fff"
+ }
},
tooltip: {
- trigger: 'item',
+ trigger: "item",
formatter: actualData
},
grid: {
top: 40,
- left: '2%',
- right: '2%',
- bottom: '3%',
+ left: "2%",
+ right: "2%",
+ bottom: "3%",
containLabel: true
},
legend: {
// orient 璁剧疆甯冨眬鏂瑰紡锛岄粯璁ゆ按骞冲竷灞�锛屽彲閫夊�硷細'horizontal'锛堟按骞筹級 娄 'vertical'锛堝瀭鐩达級
- orient: 'vertical',
+ orient: "vertical",
// x 璁剧疆姘村钩瀹夋斁浣嶇疆锛岄粯璁ゅ叏鍥惧眳涓紝鍙�夊�硷細'center' 娄 'left' 娄 'right' 娄 {number}锛坸鍧愭爣锛屽崟浣峱x锛�
- x: 'left',
+ x: "left",
// y 璁剧疆鍨傜洿瀹夋斁浣嶇疆锛岄粯璁ゅ叏鍥鹃《绔紝鍙�夊�硷細'top' 娄 'bottom' 娄 'center' 娄 {number}锛坹鍧愭爣锛屽崟浣峱x锛�
- y: '10%',
+ y: "10%",
//left: 10,
- itemWidth: 24, // 璁剧疆鍥句緥鍥惧舰鐨勫
- itemHeight: 18, // 璁剧疆鍥句緥鍥惧舰鐨勯珮
+ itemWidth: 24, // 璁剧疆鍥句緥鍥惧舰鐨勫
+ itemHeight: 18, // 璁剧疆鍥句緥鍥惧舰鐨勯珮
textStyle: {
- color: '#666' // 鍥句緥鏂囧瓧棰滆壊
+ color: "#fff" // 鍥句緥鏂囧瓧棰滆壊
},
// itemGap璁剧疆鍚勪釜item涔嬮棿鐨勯棿闅旓紝鍗曚綅px锛岄粯璁や负10锛屾í鍚戝竷灞�鏃朵负姘村钩闂撮殧锛岀旱鍚戝竷灞�鏃朵负绾靛悜闂撮殧
// itemGap: 30,
- backgroundColor: '#eee', // 璁剧疆鏁翠釜鍥句緥鍖哄煙鑳屾櫙棰滆壊
- data: actualData,
+ // backgroundColor: "#eee", // 璁剧疆鏁翠釜鍥句緥鍖哄煙鑳屾櫙棰滆壊
+ data: actualData
},
- series: [{
- //name: '鑳芥簮',
- type: 'pie',
- radius: ['50%', '80%'], // 璁剧疆鐜舰楗肩姸鍥撅紝 绗竴涓櫨鍒嗘暟璁剧疆鍐呭湀澶у皬锛岀浜屼釜鐧惧垎鏁拌缃鍦堝ぇ灏�
- center: ['50%', '50%'], // 璁剧疆楗肩姸鍥句綅缃紝绗竴涓櫨鍒嗘暟璋冩按骞充綅缃紝绗簩涓櫨鍒嗘暟璋冨瀭鐩翠綅缃�
- data: expectedData,
- // itemStyle 璁剧疆楗肩姸鍥炬墖褰㈠尯鍩熸牱寮�
- itemStyle: {
- // emphasis锛氳嫳鏂囨剰鎬濇槸 寮鸿皟;鐫�閲�;锛堣疆寤撱�佸浘褰㈢瓑鐨勶級椴滄槑;绐佸嚭锛岄噸璇�
- // emphasis锛氳缃紶鏍囨斁鍒板摢涓�鍧楁墖褰笂闈㈢殑鏃跺�欙紝鎵囧舰鏍峰紡銆侀槾褰�
- emphasis: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(30, 144, 255锛�0.5)'
+ series: [
+ {
+ //name: '鑳芥簮',
+ type: "pie",
+ radius: ["50%", "80%"], // 璁剧疆鐜舰楗肩姸鍥撅紝 绗竴涓櫨鍒嗘暟璁剧疆鍐呭湀澶у皬锛岀浜屼釜鐧惧垎鏁拌缃鍦堝ぇ灏�
+ center: ["50%", "50%"], // 璁剧疆楗肩姸鍥句綅缃紝绗竴涓櫨鍒嗘暟璋冩按骞充綅缃紝绗簩涓櫨鍒嗘暟璋冨瀭鐩翠綅缃�
+ data: expectedData,
+ // itemStyle 璁剧疆楗肩姸鍥炬墖褰㈠尯鍩熸牱寮�
+ itemStyle: {
+ // emphasis锛氳嫳鏂囨剰鎬濇槸 寮鸿皟;鐫�閲�;锛堣疆寤撱�佸浘褰㈢瓑鐨勶級椴滄槑;绐佸嚭锛岄噸璇�
+ // emphasis锛氳缃紶鏍囨斁鍒板摢涓�鍧楁墖褰笂闈㈢殑鏃跺�欙紝鎵囧舰鏍峰紡銆侀槾褰�
+ emphasis: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: "rgba(30, 144, 255锛�0.5)"
+ },
+ normal: {
+ label: {
+ fontSize: 25
+ }
+ }
},
- normal: {
- label:{
- fontSize:25,
+ // 璁剧疆鍊煎煙鐨勯偅鎸囧悜绾�
+ labelLine: {
+ normal: {
+ show: false // show璁剧疆绾挎槸鍚︽樉绀猴紝榛樿涓簍rue锛屽彲閫夊�硷細true 娄 false
+ }
+ },
+ avoidLabelOverlap: false,
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: "40",
+ fontWeight: "bold"
+ }
+ },
+ // 璁剧疆鍊煎煙鐨勬爣绛�
+ label: {
+ normal: {
+ position: "inner", // 璁剧疆鏍囩浣嶇疆锛岄粯璁ゅ湪楗肩姸鍥惧 鍙�夊�硷細'outer' 娄 'inner锛堥ゼ鐘跺浘涓婏級'
+ // formatter: '{a} {b} : {c}涓� ({d}%)' 璁剧疆鏍囩鏄剧ず鍐呭 锛岄粯璁ゆ樉绀簕b}
+ // {a}鎸噑eries.name {b}鎸噑eries.data鐨刵ame
+ // {c}鎸噑eries.data鐨剉alue {d}%鎸囪繖涓�閮ㄥ垎鍗犳�绘暟鐨勭櫨鍒嗘瘮
+ formatter: "{b} : ({d}%)"
}
}
- },
- // 璁剧疆鍊煎煙鐨勯偅鎸囧悜绾�
- labelLine: {
- normal: {
- show: false , // show璁剧疆绾挎槸鍚︽樉绀猴紝榛樿涓簍rue锛屽彲閫夊�硷細true 娄 false
- }
- },
- avoidLabelOverlap: false,
- emphasis: {
- label: {
- show: true,
- fontSize: '40',
- fontWeight: 'bold'
- }
- },
- // 璁剧疆鍊煎煙鐨勬爣绛�
- label: {
- normal: {
- position: 'inner', // 璁剧疆鏍囩浣嶇疆锛岄粯璁ゅ湪楗肩姸鍥惧 鍙�夊�硷細'outer' 娄 'inner锛堥ゼ鐘跺浘涓婏級'
- // formatter: '{a} {b} : {c}涓� ({d}%)' 璁剧疆鏍囩鏄剧ず鍐呭 锛岄粯璁ゆ樉绀簕b}
- // {a}鎸噑eries.name {b}鎸噑eries.data鐨刵ame
- // {c}鎸噑eries.data鐨剉alue {d}%鎸囪繖涓�閮ㄥ垎鍗犳�绘暟鐨勭櫨鍒嗘瘮
- formatter: '{b} : ({d}%)'
- },
}
- }
- ],
- })
+ ]
+ });
}
}
-}
+};
</script>
--
Gitblit v1.9.3