如图：
image.png
下载echarts：版本如下：
"echarts": "^4.9.0",
vue文件：
<template>
<div>
<div id="main" ref="dom"></div>
</div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts';
onMounted(()=>{
var MyCubeRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 24, //柱宽
zWidth: 4, //阴影折角宽
zHeight: 0, //阴影折角高
},
buildPath: function (ctx, shape) {
const api = shape.api;
//坐标系列
const xAxisPoint = api.coord([shape.xValue, 0]);
const p0 = [shape.x, shape.y];
const p1 = [shape.x - 12, shape.y];
const p4 = [shape.x + 12, shape.y];
const p2 = [xAxisPoint[0] - 12, xAxisPoint[1]];
const p3 = [xAxisPoint[0] + 12, 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();
}
});
var MyCubeShadow = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 15,
zWidth: 6,
zHeight: 4,
},
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p0 = [shape.x, shape.y];
const p1 = [shape.x - 12, shape.y];
const p4 = [shape.x + 12, shape.y];
const p6 = [shape.x + 12 + 6, shape.y - 5];
const p7 = [shape.x - 12 + 6, shape.y - 5];
const p3 = [xAxisPoint[0] + 12, xAxisPoint[1]];
const p5 = [xAxisPoint[0] + 12 + 6, xAxisPoint[1] - 5];
ctx.moveTo(p4[0], p4[1]); //4
ctx.lineTo(p3[0], p3[1]); //3
ctx.lineTo(p5[0], p5[1]); //5
ctx.lineTo(p6[0], p6[1]); //6
ctx.lineTo(p4[0], p4[1]); //4
ctx.moveTo(p4[0], p4[1]); //4
ctx.lineTo(p6[0], p6[1]); //6
ctx.lineTo(p7[0], p7[1]); //7
ctx.lineTo(p1[0], p1[1]); //1
ctx.lineTo(p4[0], p4[1]); //4
ctx.closePath();
}
});
echarts.graphic.registerShape('MyCubeRect', MyCubeRect);
echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow);
var seriesData = [20,100,50,44,12];
let option = {
xAxis: {
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
yAxis: {
type: 'value'
},
series: [{
type: 'custom',
data: seriesData,
renderItem: function (params, api) {
let location = api.coord([api.value(0), api.value(1)]);
return {
type: 'group',
children: [
// 正面
{
type: 'MyCubeRect', // shape 属性描述了这个矩形的像素位置和大小
shape: {
api,
xValue: api.value(0),//表示取出当前 dataItem 中第一个维度的数值
yValue: api.value(0),
x: location[0],
y: location[1]
},
style: {
//边框颜色
stroke: 'rgba(255,255,255,1)',
//平面颜色
// fill:{ //渐变
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [{
// offset: 0, color: '#3F66EC' // 0% 处的颜色
// }, {
// offset: 1, color: '#8092D0' // 100% 处的颜色
// }],
// global: false // 缺省为 false
// },
fill: '#4067EB',
// text:seriesData[params.dataIndex],
// textPosition:[10,-20] //文字显示位置
}
},
// 侧面和顶部
{
type: 'MyCubeShadow',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: {
//边框颜色
stroke: '#ffffff',
// stroke: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [{
// offset: 0, color: '#8092D0' // 0% 处的颜色
// }, {
// offset: 1, color: '#3F66EC' // 100% 处的颜色
// }],
// global: false // 缺省为 false
// },
fill: '#4067EB'//平面颜色
}
}]
};
}
}]
};
let dom = echarts.init(document.getElementById("main"));
dom.setOption(option, true)
})
</script>
<style>
#main {
width: 400px;
height: 300px;
}
</style>
