vue使用Highcharts实现不同高度的3D环形图
作者：ᥬᥬ(◦˙▽˙◦)᭄᭄
这篇文章主要为大家详细介绍了vue使用Highcharts实现不同高度的3D环形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Highcharts实现不同高度的3D环形图的具体代码，供大家参考，具体内容如下
要实现的效果：
完整代码如下：
// 修改3d饼图绘制过程
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('container', {
chart: {
type: 'pie',
animation: false,
events: {
load: function() {
var each = Highcharts.each,
points = this.series[0].points;
each(points, function(p, i) {
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,
}
},
title: {
text: 'XXXXXXXXXXX'
},
subtitle: {
text: 'Highcharts 中的3D圆环图'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
innerSize: 180,
dataLabels: {
enabled: false
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [{
'name': 'Firefox',
y: 30.0,
h: 50
}, {
name: 'IE',
y: 26.8,
h: 15
}, {
name: 'Chrome',
y: 12.8,
h: 20
}, {
'name': 'Safari',
y: 8.5,
h: 2
}, {
'name': 'Opera',
y: 6.2,
h: 15
}, {
'name': 'Others',
y: 0.7,
h: 30
}]
}]
});<div id="container" style="height: 400px"></div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。