highchart 3D 环形图 基础设置

先使用npm安装：cnpm install highcharts --save 或者 npm install highcharts --save

main.js 引用

import Highcharts from 'highcharts'
import Highcharts3d from 'highcharts/highcharts-3d'
Highcharts3d(Highcharts)

基础设置

 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: '50%',
            size: 200, // 设置饼图大小
            depth: 45,
            dataLabels: {
              enabled: true, // 显示连线
              distance: '10%', //连线长度
              formatter: function () {
                //this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
                return '<span"> ' + this.y + 'm³</span>';
              },
              style: {  // 标题样式设置
                color: '#FFFFFF',      //字体颜色
                fontSize: "12px",   //字体大小
                fontWeight: '400', // 字体粗细
                textOutline: "none", // 去除黑色阴影
              }
            },
            states: {
              halo: {
                pacity: 0.5
              }
            },
 
          }
        },
         tooltip: {  // 提示设置
          crosshairs: true,
          enabled: true,  //false 不显示提示框
          formatter: function () {
            // console.log(this);
            let str = "<span style=font-size:12px;>" + this.key + ':' + this.y + "m³</span>" + "<br />";
            return str;
          },
        },
        credits: {
          enabled: false  // 禁用版权信息
        },
        series: [{
          name: '',
          type: 'pie',
          data: [
         { name: 'name1', sliced: true, selected: true, y: 6, color: 'rgba(106, 230, 170,0.8)', },
            { name: 'name2', sliced: true, selected: true, y: 2, color: 'rgb(190, 70, 185)', },
            { name: 'name3', sliced: true, selected: true, y: 6, color: 'rgba(24, 110, 230,0.9)' },
            { name: 'name4', sliced: true, selected: true, y: 4, color: 'rgba(57, 120, 200,0.7)' },
      ]
        }]
      }
 
 
highcharts.chart('useElectricity', options)