fxc_desktop/src/components/fangxincha/pie3d.vue

<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,
      },
    },
    data() {
      return {
          
      }
    },
    mounted() {
      this.moreChart();
    },
    watch: {
      value1(){
        this.updataChart()
      },
      value2(){
        this.updataChart()
      },
      value3(){
        this.updataChart()
      },
    },
    methods: {
      updataChart(){
        const that = this
        this.chart.series[0].update({
          data:[
            ['全程温控',that.value1],
            ['实时温控',that.value2],
            ['追溯标签',that.value3],
          ]
        })
      },
      moreChart() {
        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:50,
              beta: 0,
            },
            margin:[0,0,0,0],
          },
          credits:{enabled:false},
          colors:["#D8585C","#89D44B","#23D9E9"],
          title: false,
          tooltip: {
            pointFormat: '{name}: <b>{point.percentage:.1f}%</b>'
          },
          legend:false,
          plotOptions: {
            pie: {
              cursor: 'pointer',
              depth: 35,
              dataLabels: {
                // enabled: false,
                distance: -20,
                format: '{point.percentage:.1f}%',
                shadow:false,
                verticalAlign:"middle",
              },
              events:{
                hide:true
              },    
            }
          },
          series: [{
            type: 'pie',
            center:["30%","40%"],
            data: [89
              ['全程温控',that.value1],
              ['实时温控',that.value2],
              ['追溯标签',that.value3],
            ]
          }]
        });
      }
    }
  })
</script>
<style>
.pie3d_con{position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: transparent;}
.highcharts-text-outline{ display: none;}
</style>