最终效果
废话不多说,直接上代码
第一步当然是引入highCharts了
import _Highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d';
highcharts3d(_Highcharts);
第二步写个div (这里宽高自己设置)
<div id="echarts4"></div>
第三步就是画图了.我的思路是先画出一个底层饼图,然后在上面加层数
let total = '857.33'
_Highcharts.chart('echarts4', {
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: 60, //这个是旋转的角度
beta: 0
}
},
title: {
text: '单位:公顷',
align: 'right',
style: {
fontSize: 14
}
},
legend: {
enabled: false,
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 10, //饼图底部高度
dataLabels: {
enabled: false
},
size: 150,
showInLegend: true,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b><br/>{point.y}:
{point.percentage:.1f} %',
distance: 20 //label显示不全调整
}
}
},
series: [
// 第一个饼图设置为100%
{
type: 'pie',
zIndex:1, //层级
data: [{
name: '旱地',
y: 900, //value值
h: 10, //高度
color: '#65c1f7'
}]
},{
type: 'pie',
zIndex:3,
center: ['50%','43%'], //调整他的距离,让他浮动到第一层上方
data: [
//这个数据不让他显示,所以设置颜色透明.防止鼠标移入出现遮挡下层,把h
设置为0
{
y: 400,
dataLabels: {
enabled: false
},
h: 0,
color: 'rgba(0,0,0,0)'
},
{
name: '水浇地',
y: 500,
h: 10,
color: '#54d5e0'
},
]
},
{
type: 'pie',
zIndex:4,
center: ['50%','17%'],
data: [
{
y: 600,
dataLabels: {
enabled: false
},
h: 0,
color: 'rgba(0,0,0,0)'
},
{
name: '水田',
y: 300,
h: 10,
color: '#f3c47a'
},
]
},
]
}
);
提示: 根据容器的大小,二层图距离底层的距离需要调整