Echarts 极丑立体柱状图

如题目所示，上效果图以及代码

效果图

这段代码是可以直接复制在echarts 的示例中打开看到的，有兴趣的同学可以去看看。

代码

const data = [220, 182, 191];
const data1 = [20, 12, 16];
const sideData = data.map(item => item + 4.5);
const sideData1 = data1.map(item => item + 4.5);

option = {

    backgroundColor: "#fff",
    title: {
        text: 'Awesome Chart'
    },
     grid: {
      left: 10,
      right: 10,
      bottom: 10,
      containLabel: true
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
         shadowStyle: {
             color: 'rgba(150,150,150,0.3)',
         }
    },
     xAxis: {
        data: ['Sun', 'Mon', 'Tue'],
        axisLine: {
        lineStyle: {
          color: '#b7cbe0',
        },
      },
      axisLabel: {
        showMaxLabel: false
      }
    },
    yAxis: {
        //坐标轴
      axisLine: {
        show: true
      },
      //坐标值标注
      axisLabel: {
        show: true,
        textStyle: {
          color: '#b7cbe0',
        }
      },
      //分格线
      splitLine: {
        show: true,
        lineStyle: {
          color: '#4784e8'
        }
      }
    },
    series: [
        {
            z:1,
            name: '第一条',
            tooltip: {
                show: true
            },
            type: 'bar',
            barWidth: 24,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "#ec4c42" // 0% 处的颜色
                    }, {
                        offset: 0.6,
                        color: "#e88e29" // 60% 处的颜色
                    }, {
                        offset: 1,
                        color: "#f8cf27" // 100% 处的颜色
                    }], false)
                }
            },
            data: data,
        }, 
        // 第一条侧边
        {
            z:2,
            type: 'bar',
            barWidth: 8,
            tooltip: {
                show: false,
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "#fe594e" // 0% 处的颜色
                    }, {
                        offset: 0.6,
                        color: "#fb9f37" // 60% 处的颜色
                    }, {
                        offset: 1,
                        color: "#f8d027" // 100% 处的颜色
                    }], false)
                }
            },
            data: sideData
        }, 
        // 顶部盖子
        {
            z:3,
            tooltip: {
                show: false
            },
            type: 'pictorialBar',
            itemStyle: {
                borderWidth: 1,
                // borderColor: '#0571D5',
                color: '#ffea9d'
            },
            symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
            symbolSize: ['32', '9'],
            symbolOffset: ['-27', '-9'],
            //symbolRotate: -5,
            symbolPosition: 'end',
            data: data,
        },
        
        
        // 第二条
        {
            name: '第二条',
            tooltip: {
                show: true,
            },
            type: 'bar',
            barWidth: 20,
            
            data: [],
        },
    
    
        // 第二条
        {
            name: '第二条',
            tooltip: {
                show: true,
            },
            type: 'bar',
            barWidth: 24,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "#0B4EC3" // 0% 处的颜色
                    }, {
                        offset: 0.6,
                        color: "#138CEB" // 60% 处的颜色
                    }, {
                        offset: 1,
                        color: "#17AAFE" // 100% 处的颜色
                    }], false)
                }
            },
            data: data1,
        }, {
            z:2,
            tooltip: {
                show: false,
            },
            type: 'bar',
            barWidth: 8,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "#09337C" // 0% 处的颜色
                    }, {
                        offset: 0.6,
                        color: "#0761C0" // 60% 处的颜色
                    }, {
                        offset: 1,
                        color: "#0575DE" // 100% 处的颜色
                    }], false)
                }
            },
            barGap: 0,
            data: sideData1,
        }, {
            z:3,
            tooltip: {
                show: false
            },
            type: 'pictorialBar',
            itemStyle: {
                borderWidth: 1,
                borderColor: '#0571D5',
                color: '#1779E0'
            },
            symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
            symbolSize: ['32', '9'],
            symbolOffset: ['26', '-9'],
            //symbolRotate: -5,  // 旋转的角度
            symbolPosition: 'end',
            data: data1,
        },
    ]
};

这是我借鉴一位师兄的经验，然后根据自身项目需求再次进行了处理，但是由于当时项目比较忙，没能及时留下师兄宝贵的经验地址，师弟这里向师兄道一声抱歉，如果此篇笔记有幸被师兄看到，希望能够私信给我，我把您的地址给添加上，注明出处。

另外推荐一个关于Echarts的网站，有很多漂亮的效果
地址
此地址 已经废弃