Echarts 3D立体柱状图，3D长方体柱状图，直接cope源码可用(源码+例图)
废话不多说，直接上代码！！！ 文章来源：https://www.toymoban.com/news/detail-616161.html
文章来源地址https://www.toymoban.com/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'));
// 创建立方体正面图形
const cubeShape1 = 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 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();
}
})
// 创建立方体的顶和侧面
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];
// 绘制侧面
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',// 柱状图以数据最大的为顶点
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: '销量统计',
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', // 正方体侧面和顶
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)
},
}到了这里，关于Echarts 3D立体柱状图(源码+例图)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
