highcharts实现立体3D饼状图
程序员文章站
2024-01-19 14:29:28
...
最近做一个h5活动页,设计师给我设计出了一个3D饼状图,我当时觉得没啥,觉得强大的echarts应该能做出来的,因为公司的项目涉及到图表的都用的echarts,但是后来去echarts官网一查,没这个功能,或者说做不出这样的效果,所以就想想用别的框架,后来就发现了highcharts,其实两个做图表方面都差不多,一个是国产的一个是进口的,而且两个做图标的效果也是有一定区别的,echarts用canvas做的,而highcharts使用svg实现的,各有各的优点吧!兼容性方面来说应该是highcharts比较强,展示效果的话echarts比较好,废话不多说了,开始贴demo代码吧!
$(function () {
Highcharts.setOptions({
colors: ['#FF4C4C', '#00AAD2']
});
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 55,//调整立体倾斜角度
beta: 0
}
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
depth: 95,//调整立体高度
dataLabels: {
enabled: true,
format: '{point.name}:{point.percentage:.1f}%',
backgroundColor:'#ffffff',
borderColor:'#333333',
borderRadius:4,
borderWidth: 2,
fontSize:50
}
}
},
series: [{
type: 'pie',
name: '浏览器占比',
data: [
{
y: 10,
name: "线下消费",
color: "#00AAD2"
}, {
y: 90,
name: "线上消费",
color: "#FF4C4C"
}
]
}]
});
});
大概效果图如下:
PS:很多参数都是可以去调的,就是需要自己研究API再加上调试,API传送门:
https://www.hcharts.cn/demo/highcharts