From 5759e19b1494dd4bbe8f4712f4afad84f9807f10 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期五, 18 九月 2020 10:02:03 +0800
Subject: [PATCH] 可视化图表自适应
---
src/pages/visual/components/eCharts/pie.vue | 46 ++++++++++++++++++++++++++++++++--------------
1 files changed, 32 insertions(+), 14 deletions(-)
diff --git a/src/pages/visual/components/eCharts/pie.vue b/src/pages/visual/components/eCharts/pie.vue
index ce1e3ac..60f96da 100644
--- a/src/pages/visual/components/eCharts/pie.vue
+++ b/src/pages/visual/components/eCharts/pie.vue
@@ -35,6 +35,13 @@
// }
},
deep:true
+ },
+ "TreeDataPool.showTreeBox":{
+ handler:function(val,oldVal){
+ if(val !== oldVal){
+ this.handleResize()
+ }
+ }
}
},
computed: {
@@ -45,24 +52,31 @@
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
- type:"scroll",
- orient: "vertical",
- // x:'right',
- right:'30px',
- top:'12%',
- textStyle: {
- color: 'rgba(136,136,136,.6)'
- },
- pageTextStyle:{
- color: 'rgba(136,136,136,.6)'
- }
+ show: false,
+ // type:"scroll",
+ // orient: "horizontal",
+ // left: '10px',
+ // right: '10px',
+ // top: '35px',
+ // align: 'auto',
+ // textStyle: {
+ // color: 'rgba(136,136,136,.6)'
+ // },
+ // pageTextStyle:{
+ // color: 'rgba(136,136,136,.6)'
+ // }
},
series: [
{
name: this.seriesName,
type: "pie",
radius: this.radiusType,
- center: ["40%", "50%"],
+ top: 40,
+ height: "68%",
+ // labelLine: {
+ // length: 15
+ // },
+ //center: ["50%", "95%"],
avoidLabelOverlap: false,
itemStyle: {
emphasis: {
@@ -97,11 +111,15 @@
methods: {
init(){
this.myChart.setOption(this.options)
+ },
+ handleResize(){
+ this.myChart.resize()
}
},
mounted() {
- this.myChart = this.$echarts.init(document.getElementById(this.domId))
- this.myChart.setOption(this.options)
+ this.myChart = this.$echarts.init(document.getElementById(this.domId));
+ this.myChart.setOption(this.options);
+ this.myChart.resize();
},
destroyed() {
this.myChart.dispose()
--
Gitblit v1.8.0