可视化图表自适应

hanbaoshan

2020-09-18 5759e19b1494dd4bbe8f4712f4afad84f9807f10

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