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/energyStatistics/energyConsumption/pieChartCost.vue | 129 ++++++++++++++++++++++---------------------
1 files changed, 66 insertions(+), 63 deletions(-)
diff --git a/energy_management_ui/src/views/energyStatistics/energyConsumption/pieChartCost.vue b/energy_management_ui/src/views/energyStatistics/energyConsumption/pieChartCost.vue
index bc7882a..330d40a 100644
--- a/energy_management_ui/src/views/energyStatistics/energyConsumption/pieChartCost.vue
+++ b/energy_management_ui/src/views/energyStatistics/energyConsumption/pieChartCost.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 '../mixins/resize'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "../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: '350px'
+ default: "350px"
},
chartData: {
- type:Object,
+ type: Object
//required: true
}
},
@@ -31,91 +31,94 @@
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({newVisitis,datas,title } = {}) {
+ setOptions({ newVisitis, datas, title } = {}) {
let scale = 1;
this.chart.setOption({
title: {
- text: '鑳芥簮娑堣垂鎴愭湰鍒嗘瀽',
- x:'left',
- y: 'top',
+ text: "鑳芥簮娑堣垂鎴愭湰鍒嗘瀽",
+ x: "left",
+ y: "top",
textStyle: {
- color: "#333",
- },
+ color: "#fff"
+ }
},
tooltip: {
- trigger: 'item',
+ trigger: "item",
formatter: datas
},
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', // 璁剧疆鏁翠釜鍥句緥鍖哄煙鑳屾櫙棰滆壊
+ // itemGap: 30,
+ backgroundColor: "#eee", // 璁剧疆鏁翠釜鍥句緥鍖哄煙鑳屾櫙棰滆壊
data: datas,
- formatter:function(item){
+ formatter: function(item) {
let target;
let unitId;
- for(let i=0;i<newVisitis.length;i++){
- if(datas[i].name===item){
- target=datas[i].value;
- unitId=datas[i].unitId
+ for (let i = 0; i < newVisitis.length; i++) {
+ if (datas[i].name === item) {
+ target = datas[i].value;
+ unitId = datas[i].unitId;
}
}
- let arr=[item+ +target+ unitId]/*["{a|"+target+"}","{b|"+item+"}"]*/
- return arr/*.join("\n")*/
- },
+ let arr = [
+ item + +target + unitId
+ ]; /*["{a|"+target+"}","{b|"+item+"}"]*/
+ return arr; /*.join("\n")*/
+ }
},
- series: [{
+ series: [
+ {
//name: '鐢ㄦ按',
- type: 'pie',
+ type: "pie",
avoidLabelOverlap: false,
- radius: ['40%', '60%'], // 璁剧疆鐜舰楗肩姸鍥撅紝 绗竴涓櫨鍒嗘暟璁剧疆鍐呭湀澶у皬锛岀浜屼釜鐧惧垎鏁拌缃鍦堝ぇ灏�
- center: ['65%', '50%'], // 璁剧疆楗肩姸鍥句綅缃紝绗竴涓櫨鍒嗘暟璋冩按骞充綅缃紝绗簩涓櫨鍒嗘暟璋冨瀭鐩翠綅缃�
- data: newVisitis,//[{value:335, name:'鐢ㄦ按' },{value:310, name:'鐢ㄧ數'},{value:234, name:'鐢ㄧ叅'}],/*selected: true*/
+ radius: ["40%", "60%"], // 璁剧疆鐜舰楗肩姸鍥撅紝 绗竴涓櫨鍒嗘暟璁剧疆鍐呭湀澶у皬锛岀浜屼釜鐧惧垎鏁拌缃鍦堝ぇ灏�
+ center: ["65%", "50%"], // 璁剧疆楗肩姸鍥句綅缃紝绗竴涓櫨鍒嗘暟璋冩按骞充綅缃紝绗簩涓櫨鍒嗘暟璋冨瀭鐩翠綅缃�
+ data: newVisitis, //[{value:335, name:'鐢ㄦ按' },{value:310, name:'鐢ㄧ數'},{value:234, name:'鐢ㄧ叅'}],/*selected: true*/
// itemStyle 璁剧疆楗肩姸鍥炬墖褰㈠尯鍩熸牱寮�
itemStyle: {
// emphasis锛氳嫳鏂囨剰鎬濇槸 寮鸿皟;鐫�閲�;锛堣疆寤撱�佸浘褰㈢瓑鐨勶級椴滄槑;绐佸嚭锛岄噸璇�
@@ -123,26 +126,26 @@
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
- shadowColor: 'rgba(30, 144, 255锛�0.5)'
+ shadowColor: "rgba(30, 144, 255锛�0.5)"
}
},
// 璁剧疆鍊煎煙鐨勯偅鎸囧悜绾�
labelLine: {
normal: {
- show: false // show璁剧疆绾挎槸鍚︽樉绀猴紝榛樿涓簍rue锛屽彲閫夊�硷細true 娄 false
+ show: false // show璁剧疆绾挎槸鍚︽樉绀猴紝榛樿涓簍rue锛屽彲閫夊�硷細true 娄 false
}
},
// 璁剧疆鍊煎煙鐨勬爣绛�
- label: {
- normal: {
- show: true,
- position: 'center',
- formatter: ['绱鎴愭湰',title].join('\n'),
- },
- emphasis: {
- show: true,
- },
- },
+ label: {
+ normal: {
+ show: true,
+ position: "center",
+ formatter: ["绱鎴愭湰", title].join("\n")
+ },
+ emphasis: {
+ show: true
+ }
+ }
/*label: {
normal: {
position: 'inner', // 璁剧疆鏍囩浣嶇疆锛岄粯璁ゅ湪楗肩姸鍥惧 鍙�夊�硷細'outer' 娄 'inner锛堥ゼ鐘跺浘涓婏級'
@@ -153,9 +156,9 @@
}
}*/
}
- ],
- })
+ ]
+ });
}
}
-}
+};
</script>
--
Gitblit v1.9.3