可以先看下面的效果图↓↓↓↓↓↓↓↓↓↓↓
下载引用highcharts.js和highcharts-3d.js
https://code.highcharts.com/highcharts.js
如果使用的是3D图表还需要使用highcharts-3d.js(highcharts.js和highcharts-3d.js的版本一定要对应否则3D效果出不来!!options3d设置无效页面console控制台还会报错)
http://code.highcharts.com/highcharts-3d.js
js:
function chart() {
Highcharts.chart('myChart', {//引号内获取H5标签id名(不加#号获取)
chart: {
type: "pie",
backgroundColor: "rgba(0, 0, 0, 0)",//去掉白色背景
options3d: {
enabled: true,//3D启用
alpha: 50,//内旋转角度
beta: 0,//外选择角度
},
},
credits: {
enabled: false,//去除右下角Highcharts.com链接标签
},
title: {
text: "",
},
legend: {
layout: 'vertical',//垂直排列
align: 'right', // 将图例对齐到右侧
verticalAlign: 'middle', // 垂直对齐方式
x: 0, // 距离容器右侧的距离
y: 0, // 距离容器上部的距离
floating: true, // 允许图例浮动
itemStyle:{
color:'#FFFFFF',//图例字体颜色,这里修改颜色后鼠标hover后的颜色不会被修改(需要style修改鼠标hover时字体颜色:.highcharts-legend-item:hover text {fill: #CCCCCC !important;})
}
},
plotOptions: {//数据列配置
pie: {
borderColor: "#000",
borderWidth: 1,
allowPointSelect: true,//是否允许选中点
cursor: "pointer",
depth: 24,//3D饼图的厚度
showInLegend: true,//true显示图例
size: '200%',//饼图大小
dataLabels: {
enabled: true,
distance: -30,//去线条
format:'<b>{point.y}</b>',//值显示在饼图区域内
},
},
},
series: [ //数据
{
type: "pie",
data: [
["邮政包裹", 30],
["圆通快递", 20],
["京东快递", 30],
["申通快递", 50],
["德邦物流", 20],
],
},
],
});
}
效果: