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/equipmentMonitor/keyEquipment/pieChart.vue | 153 ++++++++++++++++++++++++++-------------------------
1 files changed, 78 insertions(+), 75 deletions(-)
diff --git a/energy_management_ui/src/views/equipmentMonitor/keyEquipment/pieChart.vue b/energy_management_ui/src/views/equipmentMonitor/keyEquipment/pieChart.vue
index 60f17c9..dfbf266 100644
--- a/energy_management_ui/src/views/equipmentMonitor/keyEquipment/pieChart.vue
+++ b/energy_management_ui/src/views/equipmentMonitor/keyEquipment/pieChart.vue
@@ -1,86 +1,89 @@
<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'
- },
- width: {
- type: String,
- default: '100%'
- },
- height: {
- type: String,
- default: '130px'
- }
+export default {
+ // mixins: [resize],
+ props: {
+ className: {
+ type: String,
+ default: "chart"
},
- data() {
- return {
- chart: null
- }
+ width: {
+ type: String,
+ default: "100%"
},
- 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');
+ height: {
+ type: String,
+ default: "130px"
+ }
+ },
+ data() {
+ return {
+ chart: null
+ };
+ },
+ 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.chart.setOption({
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b} : {c} ({d}%)'
- },
- // legend: {
- // left: 'center',
- // bottom: '10',
- // data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
- // },
- legend: {
- type: 'scroll',
- orient: 'vertical',
- right: 10,
- top: 20,
- bottom: 20,
- data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
- },
- series: [
- {
- name: 'WEEKLY WRITE ARTICLES',
- type: 'pie',
- radius: '55%',
- center: ['40%', '50%'],
- data: [
- { value: 320, name: 'Industries' },
- { value: 240, name: 'Technology' },
- { value: 149, name: 'Forex' },
- { value: 100, name: 'Gold' },
- { value: 59, name: 'Forecasts' }
- ],
- // animationEasing: 'cubicInOut',
- animationDuration: 2600
- }
- ]
- })
- }
+ this.chart.setOption({
+ tooltip: {
+ trigger: "item",
+ formatter: "{a} <br/>{b} : {c} ({d}%)"
+ },
+ // legend: {
+ // left: 'center',
+ // bottom: '10',
+ // data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+ // },
+ legend: {
+ type: "scroll",
+ orient: "vertical",
+ right: 10,
+ top: 20,
+ bottom: 20,
+ data: ["Industries", "Technology", "Forex", "Gold", "Forecasts"],
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ series: [
+ {
+ name: "WEEKLY WRITE ARTICLES",
+ type: "pie",
+ radius: "55%",
+ center: ["40%", "50%"],
+ data: [
+ { value: 320, name: "Industries" },
+ { value: 240, name: "Technology" },
+ { value: 149, name: "Forex" },
+ { value: 100, name: "Gold" },
+ { value: 59, name: "Forecasts" }
+ ],
+ // animationEasing: 'cubicInOut',
+ animationDuration: 2600
+ }
+ ]
+ });
}
}
+};
</script>
--
Gitblit v1.9.3