highcharts3D饼图应用

先使用npm安装：

npm install highcharts --save

引入方式：

import HighCharts from 'highcharts'
import Highcharts3D from 'highcharts/highcharts-3d';

或者：

const highcharts= require('highcharts')
const Highcharts3D = require('highcharts/highcharts-3d')

然后初始化：

Highcharts3D(HighCharts);

接下来是配置：

官网地址：3D 环形图 | JShare

菜鸟教程：Highcharts 3D饼图 | 菜鸟教程

 let options = {
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(255, 255, 255, 0)',  // 设置背景颜色透明 默认是白色
          options3d: {
            enabled: true,  //显示图表是否设置为3D
            alpha: 55, // 内旋转角度 从前后看 我理解为以x轴为基准的旋转  
            beta: 0   // 外旋转角度 从左右看 我理解为以z轴为基准的旋转  不知道咋形容，用的时候可以都试试 我这样设置的话饼图是躺着的
          },
          animation: false,
        },
        title: {
          text: ''  // 饼图的标题
        },
        subtitle: {
          text: '',// 饼图的副标题
          style: {  // 标题样式设置
            color: '#FFFFFF',      //字体颜色
            "fontSize": "20px",   //字体大小
            fontWeight: 'bold', // 字体粗细
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: true, // 禁用点击事件
            innerSize: '60%',  //  中心圆环大小
            depth: 45,    // 饼图厚度
            dataLabels: {
              enabled: true, // 是否显示连线
              distance: 6, // 连线长度
            }
          }
        },
        credits: {
          enabled: false  // 禁用版权信息
        },
        series: [{
          name: '',
          type: 'pie',
          data: [
       { name: '灌溉用电', sliced: true, selected: true, y: 6, color: 'rgba(105, 201, 170,0.9)', },
            { name: '农业用电', sliced: true, selected: true, y: 2, color: 'rgb(97, 70, 185)', },
            { name: '工商业用电', sliced: true, selected: true, y: 6, color: 'rgba(22, 117, 146,0.9)' },
            { name: '生活用电', sliced: true, selected: true, y: 4, color: 'rgba(47, 106, 196,0.9)' },
      ]
        }]
      }


highcharts.chart('useElectricity', options)