getPie() {
var each = highcharts.each,
round = Math.round,
cos = Math.cos,
sin = Math.sin,
deg2rad = Math.deg2rad;
highcharts.wrap(highcharts.seriesTypes.pie.prototype, 'translate', function(proceed) {
proceed.apply(this, [].slice.call(arguments, 1));
// Do not do this if the chart is not 3D
if (!this.chart.is3d()) {
return;
}
var series = this,
chart = series.chart,
options = chart.options,
seriesOptions = series.options,
depth = seriesOptions.depth || 0,
options3d = options.chart.options3d,
alpha = options3d.alpha,
beta = options3d.beta,
z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
z += depth / 2;
if (seriesOptions.grouping !== false) {
z = 0;
}
each(series.data, function(point) {
var shapeArgs = point.shapeArgs,
angle;
point.shapeType = 'arc3d';
var ran = point.options.h;
shapeArgs.z = z;
shapeArgs.depth = depth * 0.75 + ran;
shapeArgs.alpha = alpha;
shapeArgs.beta = beta;
shapeArgs.center = series.center;
shapeArgs.ran = ran;
angle = (shapeArgs.end + shapeArgs.start) / 2;
point.slicedTranslation = {
translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
};
});
});
(function(H) {
H.wrap(highcharts.SVGRenderer.prototype, 'arc3dPath', function(proceed) {
// Run original proceed method
var ret = proceed.apply(this, [].slice.call(arguments, 1));
ret.zTop = (ret.zOut + 0.5) / 100;
return ret;
});
}(highcharts));
// 生成不同高度的3d饼图
highcharts.chart('pieMain', {
chart: {
type: 'pie',
animation: false,
backgroundColor: 'rgba(0, 0, 0, 0)', // 不显示背景色
events: {
load: function() {
var each = highcharts.each,
points = this.series[0].points;
each(points, function(p) {
p.graphic.attr({
translateY: -p.shapeArgs.ran
});
p.graphic.side1.attr({
translateY: -p.shapeArgs.ran
});
p.graphic.side2.attr({
translateY: -p.shapeArgs.ran
});
});
}
},
options3d: {
enabled: true,
alpha: 75,
beta: 0
}
},
title: '',
plotOptions: {
pie: {
allowPointSelect: true, //每个扇块能否选中
cursor: "pointer", //鼠标指针
innerSize: 0,
size: 390,
depth: 45, //饼图的厚度
dataLabels: {
enabled: true, //是否显示饼图的线形tip
distance: 0,//设置引导线的长度
color: '#b9b8ce',//全局设置字体颜色
style: {
textOutline: 'none', //去掉文字白边
fontSize: '12'
},
formatter: function() {
let name = this.point.name
let value = this.y
return name + value + '%'
}
},
},
},
credits: {
enabled: false //禁用版权url 此处不设置
},
series: [{
type: 'pie',
name: '',
data: [{
'name': '搜狗',
y: 30.0,
h: 50
}, {
name: '',
y: 26.8,
h: 15
}, {
name: '谷歌',
y: 12.8,
h: 20
}, {
'name': 'IE',
y: 8.5,
h: 2
}, {
'name': '火狐',
y: 6.2,
h: 15
}]
}]
});
}
highcharts生成不同高度的3D饼图
最新推荐文章于 2024-05-10 16:09:06 发布