highcharts 3d饼图配置说明

关于图表项目中很大一部分都是Echarts，但是3d饼图echarts却不支持，所以就转到了highcharts。
先说说在vue项目里的配置吧！
1.安装

npm install highcharts-vue
npm install highcharts --save

2.main.js 内引用

import HighchartsVue from 'highcharts-vue'
import highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'

Vue.use(HighchartsVue)
highcharts3d(highcharts)

因为要配置3d饼图，所以highcharts-3d引入是必不可少的。
3.使用

high-chart class内写入饼图尺寸大小
chartOptions详细配置：

export default {
    name: "high-charts-test", 
    data() {
      return {
        chartOptions: {
          colors: ["#2a92ea", "#ffc53d", "#36cfc9", "#52c41a", "#df9d53","#ffffff"],
          chart: {
            type: 'pie',
            backgroundColor:'transparent',
            options3d: {
              enabled: true,         // 是否启用 3D 功能，默认是 false，设置为 true 开启 3D 功能
              alpha: 45,               // 内旋转角度
              beta: 0,                // 外旋转角度
            },
          },
          title: {
            text: '2014年某网站不同浏览器访问量占比'
          },
          tooltip: {
            pointFormat: '{series.name}: {point.percentage:.1f}%'
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              depth: 35,
              dataLabels: {
                enabled: true,
                // format: '
{point.name}:
{point.percentage:.1f} %
',
                style: {
                  color: '#FFF',
                  textOutline:"none"
                },
                useHTML:true,//使用formatter内的标签和样式
                formatter: function() {
                  //this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
                  console.log(this)
                  return '
'+this.point.name+'
' +
                    '
' + this.y + '亿元
'+
                    '
'+ this.percentage.toFixed(1) + '%
'
                }

              }
            }
          },
          series: [{
            type: 'pie',
            name: '占比',
            data: [
              ['Firefox',   45.0],
              {
                name: 'Chrome',
                y: 12.8,
                sliced: true,//饼图 突出 Chrome项
                selected: true,
              },
            ]
          }]
        },
      };
    },
  };

4.效果图

屏幕快照 2020-11-26 下午5.21.08.png

总结：本篇比较侧重dataLabels里的自定义配置，首先是useHTML设为true，然后formatter内的标签和样式才会出效果。每个扇形区域可在formatter方法内通过 console.log(this) 来查看详细信息。虽没有仔细研究下去，估计其他formatter配置也是大同小异。后期项目需要可能会再深入了解，本篇就这样吧over~