<template>
  <div class="pie3d_con" :id="id"></div>
</template>
<script>
  import Highcharts from "highcharts/highstock";
  import Highcharts3D from "highcharts/highcharts-3d";
  Highcharts3D(Highcharts);
  export default({
    name: "pie3d",
    props:{
      id:{
        type:String,
        required:true
      },
      value1:{
        default:1,
      },
      value2:{
        default:1,
      },
      value3:{
        default:1,
      },
      chipCountData:{
        default:[],
      },
    },
    data() {
      return {
          
      }
    },
    mounted() {
      this.moreChart();
    },
    watch: {
      value1(){
        this.updataChart()
      },
      value2(){
        this.updataChart()
      },
      value3(){
        this.updataChart()
      },
      chipCountData(){
        this.updataChart()
      },
    },
    methods: {
      updataChart(){
        const that = this
        var token = localStorage.getItem("token")
        if(token)this.chart.series[0].update({
          data:that.chipCountData
        })
        else this.chart.series[0].update({
          data:[
            ['科兴',that.value1],
            ['康希诺',that.value2],
            ['生物',that.value3],
          ]
        })
      },
      moreChart() {
        var chipCountData = this.chipCountData
        const that = this
        if (this.chart) {
          this.chart.destroy();
        }
        // 初始化 Highcharts 图表
        this.chart = new Highcharts.Chart(that.id, {
          chart: {
            type: 'pie',
            backgroundColor:"transparent",
            options3d: {
              enabled: true,
              alpha: 45,
              beta: 0
            },
            spacing:[5,5,5,5]
          },
          credits:{enabled:false},
          colors:["#1D3BFF","#29DDB0","#81D2FF","#FFD157","#FF741F"],
          title: false,
          tooltip: {
            pointFormat: '{name}: <b>{point.percentage:.1f}%</b>'
          },
          legend:{
            layout:"horizontal",
            align: 'center',
            verticalAlign: 'top', 
            // layout:"vertical",
            // align: 'right',
            // verticalAlign: 'middle', 
            labelFormat:"{name} {y}",
            itemStyle:{
              "color": "#ffffff"
            },
            itemHoverStyle:false
          },
          plotOptions: {
            pie: {
              cursor: 'pointer',
              depth: 35,
              showInLegend: true,
              dataLabels: {
                // enabled: false,
                // distance: -20,
                color:"#ffffff",
                format: '{point.percentage:.1f}%',
              },
              events:{
                hide:true
              },    
            }
          },
          series: [{
            type: 'pie',
            innerSize: '60%',
            center:["50%","50%"],
            // center:["40%","50%"],
            data: 
            // chipCountData,
            [
              ['科兴',that.value1],
              ['康希诺',that.value2],
              ['生物',that.value3],
            ]
          }]
        });
      }
    }
  })
</script>
<style>
.pie3d_con{position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: transparent;}
</style>