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.使用

<highcharts :options="chartOptions" class="high-chart"></highcharts>

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}: <b>{point.percentage:.1f}%</b>'
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              depth: 35,
              dataLabels: {
                enabled: true,
                // format: '<p>{point.name}:</p><p>{point.percentage:.1f} %</p>',
                style: {
                  color: '#FFF',
                  textOutline:"none"
                },
                useHTML:true,//使用formatter内的标签和样式
                formatter: function() {
                  //this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
                  console.log(this)
                  return '<div><p style="color: #ccf9ff;">'+this.point.name+'</p>' +
                    '<p><span style="font-size: 14px;margin-right: 4px;">' + this.y + '</span><span style="color: #5c9da5;font-size: 12px;">亿元</span></p>'+
                    '<p style="font-size: 14px;color: ' + this.point.color + '">'+ this.percentage.toFixed(1) + '%</p></div>'
                }

              }
            }
          },
          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~