highcharts|highcharts 3d饼图配置说明 highcharts3d饼图配置说明

关于图表项目中很大一部分都是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)

【highcharts|highcharts 3d饼图配置说明】因为要配置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~