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: '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)

效果：

设置有背景图的提示框样式：

 tooltip: {
          useHTML: true, //使用HTML渲染提示框
          borderWidth: 0,  // 去掉默认边框
          shadow: false,  // 是否显示阴影
          backgroundColor: "rgba(63, 168, 255, 0)",
          formatter: function () {
// 样式类名：tooltipstyle

            let str = `<div class='tooltipstyle'>
            <p class='tooltips-title'>${this.point.name} </p>
            <p>${this.point.y.toFixed(2)}%</p>
            </div>`;
            return str
          }
        },


// 将想要的样式写在对应的类名即可 如果无效 尝试 /deep/
<style lang="scss" scoped>
/deep/ .tooltipstyle{
font-size: 12px;
  color: #fff;
  background: url('') no-repeat;
}


</style>