数据大屏可视化-highcharts-3D实心饼图

highcharts官网地址，HIGHCHARTS 图集

引入npm install highcharts --save
在main.js中

// highcharts引入
import HighchartsVue from 'vue-highcharts'
import Highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(Highcharts)
Vue.prototype.$HighCharts = Highcharts

在要用到的页面

<template>
  <div>
  
    <div class="bodyblock2">
      <div id="pie1"></div>
    </div>
  </div>
</template>

import * as Highcharts from "highcharts";

export default {
  data() {
    return {
      myChart: null,
      option: {},
    };
  },
  mounted() {
    this.setPie();
  },
  watch: {
    //观察option的变化
    option: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            this.myChart.setOption(newVal);
          } else {
            this.myChart.setOption(oldVal);
          }
        }
      },
      deep: true, //对象内部属性的监听，关键。
    },
  },
  methods: {
    setPie() {
      var each = Highcharts.each,
        round = Math.round,
        cos = Math.cos,
        sin = Math.sin,
        deg2rad = Math.deg2rad;
      Highcharts.wrap(
        Highcharts.seriesTypes.pie.prototype,
        "translate",
        function (proceed) {
          proceed.apply(this, [].slice.call(arguments, 1));
          // Do not do this if the chart is not 3D
          if (!this.chart.is3d()) {
            return;
          }
          var series = this,
            chart = series.chart,
            options = chart.options,
            seriesOptions = series.options,
            depth = seriesOptions.depth || 0,
            options3d = options.chart.options3d,
            alpha = options3d.alpha,
            beta = options3d.beta,
            z = seriesOptions.stacking
              ? (seriesOptions.stack || 0) * depth
              : series._i * depth;
          z += depth / 2;
          if (seriesOptions.grouping !== false) {
            z = 0;
          }
          each(series.data, function (point) {
            var shapeArgs = point.shapeArgs,
              angle;
            point.shapeType = "arc3d";
            var ran = point.options.h;
            shapeArgs.z = z;
            shapeArgs.depth = depth * 0.75 + ran;
            shapeArgs.alpha = alpha;
            shapeArgs.beta = beta;
            shapeArgs.center = series.center;
            shapeArgs.ran = ran;
            angle = (shapeArgs.end + shapeArgs.start) / 2;
            point.slicedTranslation = {
              translateX: round(
                cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
              ),
              translateY: round(
                sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
              ),
            };
          });
        }
      );

      (function (H) {
        H.wrap(Highcharts.SVGRenderer.prototype, "arc3dPath", function (proceed) {
          // Run original proceed method
          var ret = proceed.apply(this, [].slice.call(arguments, 1));
          ret.zTop = (ret.zOut + 0.5) / 100;
          return ret;
        });
      })(Highcharts);

      this.option = {
        // pane: {
        //   background: [{backgroundColor: 'red'}],
        // },
        tooltip:{
          formatter:function(){
            return this.point.name+':'+this.y;
          },
          style:{fontWeight:700}
        },
        title: {
          text: null
        },
        credits: {
          enabled: false
        },
        // style:{color:'red'},
        chart: {
          type: "pie",
          animation: false,
        
          events: {
            load: function () {
              var each = Highcharts.each,
                points = this.series[0].points;
              each(points, function (p, i) {
                p.graphic.attr({
                  translateY: -p.shapeArgs.ran,
                });
                p.graphic.side1.attr({
                  translateY: -p.shapeArgs.ran,
                });
                p.graphic.side2.attr({
                  translateY: -p.shapeArgs.ran,
                });
              });
            },
          },
          options3d: {
            enabled: true,
            alpha: 75,
            beta: 0,
          },
          backgroundColor: 'transparent',
        },
        colors: ["#fe6265", "#58d6fc", "#ffcc00", "#3dbc6a"],
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            depth: 45, //饼图厚度
            dataLabels: {
              enabled: true, //是否显示饼图的线形tip
              // format: " {point.percentage:.1f} %<br/>{point.name}",
                formatter: function() {//设置图的字体颜色和饼状图保存一致
                return (
                  '<p style="color:' +
                  this.color +
                  '">' +
                  this.point.name +
                  '</p><br><p style="color:' +
                  this.color +
                  '">' +
                  this.percentage.toFixed(1) +
                  "%</p>"
                );
              },
              connectorColor: "white", //连接线颜色，默认是扇区颜色
              distance: 10, // 数据标签与扇区距离
              connectorPadding: 15, // 数据标签与连接线的距离
               style: {
                        // fontFamily:'',
                        color:'#fff',
                        fontSize:'15px'
                    }
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "占比",
            data: [
              {
                name: "电气工程",
                y: 40,
                h: 40,
              },
              {
                name: "道路工程",
                y: 15,
                h: 20,
              },
              {
                name: "交通工程",
                y: 10,
                h: 10,
              },
              {
                name: "绿化工程",
                y: 35,
                h: 30,
              },
            ],
          },
        ],
      };
      this.$HighCharts.chart("pie1", this.option);
    },
   
  },
  };

<style>
.gcgkblock .bodyblock2 {
  width: 100%;
  height: 100%;
}
#pie1 {
  width: 560px;
  height: 280px;
}
</style>