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 ++++++++++----
src/pages/visual/components/eCharts/category.vue | 9 ++
src/pages/cameraVideo/index/Video.vue | 63 --------------------
src/pages/visual/components/eCharts/mutPie.vue | 18 +++++-
4 files changed, 56 insertions(+), 80 deletions(-)
diff --git a/src/pages/cameraVideo/index/Video.vue b/src/pages/cameraVideo/index/Video.vue
index f5c9a47..c8077e2 100644
--- a/src/pages/cameraVideo/index/Video.vue
+++ b/src/pages/cameraVideo/index/Video.vue
@@ -65,68 +65,7 @@
<video-photo ref="photoview" @addToBase="toAdd"></video-photo>
</div>
</div>
- <hsc-window-style-metal class="windown-model">
- <hsc-window
- v-for="(item, index) in CardList.addBaseList"
- :closeButton="true"
- @closebuttonclick="closeWindow(index)"
- :key="index"
- @update:height="resizeHeight"
- @update:width="resizeWidth"
- style="background:white; height:475px"
- :left="center.x + index * 10"
- :top="center.y + index * 10"
- :resizable="true"
- positionHint="center"
- :isScrollable="true"
- :minWidth="662"
- :minHeight="479"
- :maxWidth="10000"
- :maxHeight="7000"
- :height="defaultHeight"
- :width="defaultWidth"
- >
- <div class="addToBase">
- <div class="topLabel">鍔犲叆搴曞簱</div>
- <div class="items">
- <div class="lable">
- <p>榛戝悕鍗� ></p>
- </div>
- <div class="baseList">
- <el-checkbox-group v-model="VideoPhotoData.selectBlacks" @change="blackAngWhite">
- <div class="base" v-for="(item, index) in VideoPhotoData.blackList" :key="index">
- <el-checkbox
- :label="item.value"
- :title="item.title"
- :disabled="item.disabled"
- >{{item.title}}</el-checkbox>
- </div>
- </el-checkbox-group>
- </div>
- </div>
- <div class="items">
- <div class="lable">
- <p>鐧藉悕鍗� ></p>
- </div>
- <div class="baseList">
- <el-checkbox-group v-model="VideoPhotoData.selectWhites" @change="blackAngWhite">
- <div class="base" v-for="(item, index) in VideoPhotoData.whiteList" :key="index">
- <el-checkbox
- :label="item.value"
- :title="item.title"
- :disabled="item.disabled"
- >{{item.title}}</el-checkbox>
- </div>
- </el-checkbox-group>
- </div>
- </div>
- <div class="buttons">
- <el-button type="primary" @click="saveAddBase(item, index)">淇濆瓨</el-button>
- <el-button type="default" @click="closeWindow(index)">鍙栨秷</el-button>
- </div>
- </div>
- </hsc-window>
- </hsc-window-style-metal>
+
</div>
</template>
diff --git a/src/pages/visual/components/eCharts/category.vue b/src/pages/visual/components/eCharts/category.vue
index e5a6af6..bd72768 100644
--- a/src/pages/visual/components/eCharts/category.vue
+++ b/src/pages/visual/components/eCharts/category.vue
@@ -32,7 +32,14 @@
}
},
deep:true
- }
+ },
+ "TreeDataPool.showTreeBox":{
+ handler:function(val,oldVal){
+ if(val !== oldVal){
+ this.handleResize()
+ }
+ }
+ },
},
data() {
return {
diff --git a/src/pages/visual/components/eCharts/mutPie.vue b/src/pages/visual/components/eCharts/mutPie.vue
index 17ba8b2..b73e15b 100644
--- a/src/pages/visual/components/eCharts/mutPie.vue
+++ b/src/pages/visual/components/eCharts/mutPie.vue
@@ -50,7 +50,14 @@
}
},
deep:true
- }
+ },
+ "TreeDataPool.showTreeBox":{
+ handler:function(val,oldVal){
+ if(val !== oldVal){
+ this.handleResize()
+ }
+ }
+ },
},
data() {
return {
@@ -85,6 +92,7 @@
series: [
{
type: 'pie',
+ height: "100%",
radius: 40,
center: ['20%', '50%'],
encode: {
@@ -169,11 +177,15 @@
methods: {
init(){
this.myChart.setOption(this.options)
+ },
+ handleResize(){
+ this.myChart.resize()
}
},
mounted() {
- this.myChart = this.$echarts.init(document.getElementById('myChartMutiPie'))
- this.myChart.setOption(this.options)
+ this.myChart = this.$echarts.init(document.getElementById('myChartMutiPie'));
+ this.myChart.setOption(this.options);
+ this.myChart.resize();
},
created() {
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