echarts横向立体3D柱状图

最新推荐文章于 2025-06-24 18:11:06 发布

黑色的糖果

最新推荐文章于 2025-06-24 18:11:06 发布

阅读量975

点赞数 3

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/Dalin0929/article/details/140207967

实现原理：series中包含两个普通的柱状图bar，其宽度各占一半且设置间距barGap为0，再添加一个象形柱状图pictorialBar，symbol设为菱形diamond，调整其位置大小层级等数据以达到覆盖在柱状图顶部的立体效果。

运行效果：

在这里插入图片描述
代码：

function getEcharts3DBar () {
   
   
    let yAxisData = ['标题1', '标题2', '标题3', '标题4', '标题5', '标题6'];
    let seriesData = [5, 36, 10, 20, 15, 25];
    var barWidth = 30, constData = [], showData = [];
    seriesData.forEach(item => {
   
   
      if (item) {