可视化图表自适应

hanbaoshan

2020-09-18 5759e19b1494dd4bbe8f4712f4afad84f9807f10

可视化图表自适应

 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>


 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 {

 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() {
    

 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()