Echarts立体柱状图
echarts绘制漂亮的立体柱状图（超详细）
为了做一个漂亮的立体柱状图，几乎吧echarts所有的柱状图都看了一遍，一遍遍的改，终于绘制出我想要的效果，下面是代码：
HTML：
<div class="content bgBox">
<div class="firstTitle">
<p class="titleName">购买力最强p>
div>
<div id="buyTop" style="width: 100%;height:90%;">div>
div>
JS：
// 购买力最强
var buyTop = echarts.init(document.getElementById('buyTop')); //图表容器
function fetchBuytop() {
//定一个方法
$.ajax({
//发送ajax请求数据
type: "POST",
url: url,
success: function (e) {
var areaData = e.data.area; //横坐标值
var payPersonNum = e.data.payPersonNum; //柱状图的值
const VALUE1 = [{
//每个柱子的颜色（可自行改变颜色）
value: payPersonNum[0],
itemStyle: {
color: 'rgba(0,137,255,1.0)'
}
},
{
value: payPersonNum[1],
itemStyle: {
color: 'rgba(0,25,255,1.0)'
}
},
{
value: payPersonNum[2],
itemStyle: {
color: 'rgba(115,5,255,1.0)'
}
},
{
value: payPersonNum[3],
itemStyle: {
color: 'rgba(215,1,255,1.0)'
}
},
{
value: payPersonNum[4],
itemStyle: {
color: 'rgba(182,105,86,1.0)'
}
}
]
const VALUE2 = [{
//最高值的柱子颜色 就是你所看到的透明那部分
value: Math.max.apply(null, payPersonNum), //这个value是柱状图的值里的最大值
itemStyle: {
color: 'rgba(0,137,255,.1)'
}
},
{
value: Math.max.apply(null, payPersonNum),
itemStyle: {
color: 'rgba(0,25,255,.1)'
}
},
{
value: Math.max.apply(null, payPersonNum),
itemStyle: {
color: 'rgba(115,5,255,.1)'
}
},
{
value: Math.max.apply(null, payPersonNum),
itemStyle: {
color: 'rgba(215,1,255,.1)'
}
},
{
value: Math.max.apply(null, payPersonNum),
itemStyle: {
color: 'rgba(182,105,86,.1)'
}
}
]
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
// 会canvas的应该都能看得懂，shape是从custom传入的
const xAxisPoint = shape.xAxisPoint
const c0 = [shape.x, shape.y]
const c1 = [shape.x - 13, shape.y - 13]
const c2 = [xAxisPoint[0] -