想要实现3D柱状饼图，使用了Highcharts，效果图如下：
代码如下：
<!doctype html>
<html lang="en">
<head>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
<style>
#container {
height: 400px;
}
.highcharts-figure, .highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
</style>
<title>3D柱状饼图</title>
</head>
<body>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Chart demonstrating the use of a 3D pie layout.
The "Chrome" slice has been selected, and is offset from the pie.
Click on slices to select and unselect them.
Note that 3D pies, while decorative, can be hard to read, and the
viewing angles can make slices close to the user appear larger than they
are.
</p>
</figure>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 50,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
{
name: 'Chrome',
depth: 80,
y: 12.8,
// sliced: true,
// selected: true
},
{
name: 'Chrome222',
depth: 180,
y: 22.8,
sliced: true,
selected: true
},
// ['Safari', 8.5],
// ['Opera', 6.2],
// ['Others', 0.7]
]
}]
});
</script>
</body>
</html>