Echarts 3D立體柱狀圖，3D長(zhǎng)方體柱狀圖，直接cope源碼可用(源碼+例圖)
廢話不多說，直接上代碼?。。?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-616161.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-616161.html
// HTML 代碼
<div id="litiBar" style="width:100%;height:400px" ></div>
// JS 代碼
data(){
return {
chart:null
}
};
mounted(){
// 3D立體柱狀圖
this.litiBar();
},
methods:{
litiBar() {
this.chart = echarts.init(document.getElementById('litiBar'));
// 創(chuàng)建立方體正面圖形
const cubeShape1 = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 110, // 長(zhǎng)方體寬度
zWidth: 8, // 陰影折角高
zHeight: 4 // 陰影折角寬
},
buildPath: (ctx, shape) => {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p0 = [shape.x, shape.y];
const p1 = [shape.x - shape.width / this.xAxisText.length, shape.y];
const p4 = [shape.x + shape.width / this.xAxisText.length, shape.y];
const p2 = [xAxisPoint[0] - shape.width / this.xAxisText.length, xAxisPoint[1]];
const p3 = [xAxisPoint[0] + shape.width / this.xAxisText.length, xAxisPoint[1]];
// 繪制正面
ctx.moveTo(p0[0], p0[1]); //0
ctx.lineTo(p1[0], p1[1]); //1
ctx.lineTo(p2[0], p2[1]); //2
ctx.lineTo(p3[0], p3[1]); //3
ctx.lineTo(p4[0], p4[1]); //4
ctx.lineTo(p0[0], p0[1]); //0
ctx.closePath();
}
})
// 創(chuàng)建立方體的頂和側(cè)面
const cubeShape2 = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 110,
zWidth: 8,
zHeight: 4
},
buildPath: (ctx, shape) => {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p1 = [shape.x - shape.width / this.xAxisText.length, shape.y];
const p4 = [shape.x + shape.width / this.xAxisText.length, shape.y];
const p6 = [shape.x + shape.width / this.xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
const p7 = [shape.x - shape.width / this.xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
const p3 = [xAxisPoint[0] + shape.width / this.xAxisText.length, xAxisPoint[1]];
const p5 = [xAxisPoint[0] + shape.width / this.xAxisText.length + shape.zWidth, xAxisPoint[1] - shape.zHeight];
// 繪制側(cè)面
ctx.moveTo(p4[0], p4[1]); //4
ctx.lineTo(p3[0], p3[1]); //3
ctx.lineTo(p5[0]+6, p5[1]-6); //5
ctx.lineTo(p6[0]+7, p6[1]-8); //6
ctx.lineTo(p4[0], p4[1]); //4
// 繪制頂部
ctx.moveTo(p4[0], p4[1]); //4
ctx.lineTo(p6[0]+7, p6[1]-8); //6
ctx.lineTo(p7[0]+7, p7[1]-8); //7
ctx.lineTo(p1[0], p1[1]); //1
ctx.lineTo(p4[0], p4[1]); //4
ctx.closePath();
}
})
echarts.graphic.registerShape('cubeShape1', cubeShape1)
echarts.graphic.registerShape('cubeShape2', cubeShape2)
this.initECharts()
},
initECharts() {
const option = {
title: {
left: 20,
top: 20
},
textStyle:{
fontSize:15,
color: '#10D5DF'
},
tooltip: {},
xAxis: {
type: 'category',
// max: 'dataMax',// 柱狀圖以數(shù)據(jù)最大的為頂點(diǎn)
data: this.xAxisText,
interval: 0,
axisLabel: {
color: '#44f0ff'
},
axisTick: {
show: false,
},// 隱藏X刻度線
axisLine: {
show: true,
lineStyle: {
color: 'rgba(28, 180, 215,0.5)'
}
}
},
yAxis: {
type: 'value',
splitLine: {
lineStyle:{
color: 'rgba(224,224,224,0.1)'// 分割軸線的顏色
}
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(28, 180, 215,0.5)'
}
}
},
grid: {
top: 80,
bottom: 30
},
series: [{
// name: '銷量統(tǒng)計(jì)',
type: 'custom',
label: {
show: true,
position: 'top',
},
// barWidth:20,
renderItem: (params, api) => {
let location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'cubeShape1', // 正方體正面
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: {
fill: new echarts.graphic.LinearGradient(0,0,0,1, [{
offset: 0.1,
color: 'rgba(27, 202, 242, 1)'
},{
offset: 1,
color: 'rgba(29, 111, 130, 1)'
}])
}
}, {
type: 'cubeShape2', // 正方體側(cè)面和頂
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: {
fill: new echarts.graphic.LinearGradient(0,0,0,1, [{
offset: 0.1,
color: 'rgba(29, 111, 130, 1)'
},{
offset: 1,
color: 'rgba(27, 202, 242, 1)'
}])
}
}]
}
},
data: this.yAxisData
}]
}
this.chart.setOption(option)
},
}到了這里，關(guān)于Echarts 3D立體柱狀圖(源碼+例圖)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
