<template>
  <el-row >
    <div
      :id="type"
      class="pie"
    ></div>
  </el-row>
</template>
<script>
import * as echarts from 'echarts';
export default {
  props: ["resData","type"],
  data() {
    return {
    };
  },
  watch: {
    resData() {
      this.getData();
    },
    type(){
      this.getData();
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let color = "rgba(255,255,255,.8)"
      let color2 = "rgba(255,255,255,.1)"
      let name = []
      for(let i =0; i<this.resData[1].length;i++){
        name.push(this.resData,this.resData[1][i].name)
      }
      let myChart = echarts.init(document.getElementById(this.type));
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: name,
          bottom: '0%',
          left: 'center',
          // orient: 'vertical',
          textStyle: {
            color: "#FFF",
            fontSize:12
          }
        },
        
        grid: {
          left: '0%',
          right: '0%',
          bottom: '15%',
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.resData[2],
          axisLabel: {
            color: color,
            interval:0,
            rotate:10,
          },
          axisTick: {
            show: false,
          },
          textStyle: {
            fontSize: 10,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: color,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: color,
            },
          },
          splitLine: {
            lineStyle: {
              color: color2,
            },
          },
          textStyle: {
            fontSize: 10,
          },
        },
        series: this.resData[1]
      };
      myChart.setOption(option);
      option && myChart.setOption(option);
      window.addEventListener("resize",function() {
          myChart.resize();
      })
    },
  },
};
</script>
<style>
.pie{
  width:640px;
  height:calc(50vh - 250px);
  margin-top:-20px;
}
</style>

