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/electricityPrice/statistics/pieChart.vue | 179 ++++++++++++++++++++++++++++++-----------------------------
1 files changed, 91 insertions(+), 88 deletions(-)
diff --git a/energy_management_ui/src/views/electricityPrice/statistics/pieChart.vue b/energy_management_ui/src/views/electricityPrice/statistics/pieChart.vue
index 6af9841..92ed64e 100644
--- a/energy_management_ui/src/views/electricityPrice/statistics/pieChart.vue
+++ b/energy_management_ui/src/views/electricityPrice/statistics/pieChart.vue
@@ -1,100 +1,103 @@
<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: '350px'
- },
- chartData: {
- type:Object,
- //required: true
+export default {
+ mixins: [resize],
+ props: {
+ className: {
+ type: String,
+ default: "chart"
+ },
+ width: {
+ type: String,
+ default: "100%"
+ },
+ height: {
+ type: String,
+ default: "350px"
+ },
+ chartData: {
+ type: Object
+ //required: true
+ }
+ },
+ watch: {
+ chartData: {
+ deep: true,
+ handler(val) {
+ this.setOptions(val);
}
+ }
+ },
+ 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.setOptions(this.chartData);
},
- watch: {
- chartData: {
- deep: true,
- handler(val) {
- this.setOptions(val)
- }
- }
- },
- 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.setOptions(this.chartData)
- },
- setOptions({legend,data} = {}) {
- this.chart.setOption({
- title: {
- text: '鏁版嵁鍒嗘瀽',
- left: 'left',
- textStyle: {
- color: '#606266',
- }
- },
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b} : {c} ({d}%)'
- },
- legend: {
- //bottom: 10,
- top:"30",
- orient: 'vertical',
- left: '10',
- data: legend,
- },
- series: [
- {
- type: 'pie',
- radius: '65%',
- center: ['50%', '50%'],
- selectedMode: 'single',
- data:data,
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
+ setOptions({ legend, data } = {}) {
+ this.chart.setOption({
+ title: {
+ text: "鏁版嵁鍒嗘瀽",
+ left: "left",
+ textStyle: {
+ color: "#606266"
+ }
+ },
+ tooltip: {
+ trigger: "item",
+ formatter: "{a} <br/>{b} : {c} ({d}%)"
+ },
+ legend: {
+ //bottom: 10,
+ top: "30",
+ orient: "vertical",
+ left: "10",
+ data: legend,
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ series: [
+ {
+ type: "pie",
+ radius: "65%",
+ center: ["50%", "50%"],
+ selectedMode: "single",
+ data: data,
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
- ]
- })
- },
+ }
+ ]
+ });
}
}
+};
</script>
--
Gitblit v1.9.3