html实现3d圆柱体

把以下代码，直接复制到 https://echarts.apache.org/ 官网，在线运行

• 效果图

  
  
  

• 源码

var xData2 = ["柴油存储", "汽油存储", "航煤存储", "附油存储"];
var data1 = [20,50,20,30];
var data2 = [100,100,100,100];
var barWidth = 80;
option = {
    backgroundColor: '#0d193a',//背景色
    //禁用鼠标hover提示
    tooltip: {
        show: false
    },
    grid:{
        left:100,
        bottom:100
    },
    //关闭动画
    animation: false,
    //X轴设置
    xAxis: {
        data: xData2,
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            interval:0,
            textStyle: {
                color: '#fff',
                fontSize:20,
            },
            margin: 30, //刻度标签与轴线之间的距离。
        },
    },
 
    //Y轴设置
    yAxis: [{
        show: false,
    }],
    
    series: [
            //三个最底下的圆片
            {
                "name": "",
                "type": "pictorialBar",
                "symbolSize": [barWidth, 25],//圆环宽度
                "symbolOffset": [0, 10],
                "z": 12,
                itemStyle:{
                    opacity:1,
                    color: function(params){
                        var a = params.name.slice(0,2);
                        if(a === '柴油'){
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fddb61' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color:  '#fddb61'// 100% 处的颜色
                            }], false)
                        }else if(a === '汽油'){
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#25c8fb' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color:  '#25c8fb'// 100% 处的颜色
                            }], false)
                        }else if(a === '航煤'){
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#6ba6ff' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color:  '#6ba6ff'// 100% 处的颜色
                            }], false)
                        }else if(a === '附油'){
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#0572dd' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color:  '#0572dd'// 100% 处的颜色
                            }], false)
                        }
                    }
                },
                "data": [1,1,1,1,1]
            },
            
            //下半截柱状图(中间部分)
            {
                name: '',
                type: 'bar',
                barWidth: barWidth,
                barGap: '-100%',
                itemStyle: {
                  //lenged文本
                    opacity:.7,
                    color: function(params){
                        var a = params.name.slice(0,2);
                        
                        if(a === '柴油'){
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fddb61' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color:  '#fddb61'// 100% 处的颜色
                            }], false)
                        }else if(a === '汽油'){
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#25c8fb' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color:  '#25c8fb'// 100% 处的颜色
                            }], false)
                        }else if(a === '航煤'){
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#6ba6ff' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color:  '#6ba6ff'// 100% 处的颜色
                            }], false)
                        }else if(a === '附油'){
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#0572dd' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color:  '#0572dd'// 100% 处的颜色
                            }], false)
                        }
                    }
                },
                data: data1
            },
            
            //顶部刻度的圆形
            {
                "name": "", //头部
                "type": "pictorialBar",
                "symbolSize": [barWidth, 25],//顶部刻度的圆形
                "symbolOffset": [0, -10],
                "z": 12,
                "symbolPosition": "end",
                itemStyle:{
                    color:'#163F7A',
                    opacity:1,
                },
                "data": data2
            },
            
            //刻度值处的圆形图标
            {
                "name": "",
                "type": "pictorialBar",
                "symbolSize": [barWidth, 25],
                "symbolOffset": [0, -10],
                "z": 12,
                itemStyle:{
                    opacity:1,
                    color: function(params){
                        var a = params.name.slice(0,2);
                        if(a === '柴油'){
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fddb61' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color:  '#fddb61'// 100% 处的颜色
                            }], false)
                        }else if(a === '汽油'){
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#25c8fb' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color:  '#25c8fb'// 100% 处的颜色
                            }], false)
                        }else if(a === '航煤'){
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#6ba6ff' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color:  '#6ba6ff'// 100% 处的颜色
                            }], false)
                        }else if(a === '附油'){
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#0572dd' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color:  '#0572dd'// 100% 处的颜色
                            }], false)
                        }
                    }
                },
                //显示当前数值
               "label": {
                  "normal": {
                      "show": true,
                      "position": "top",
                      // "formatter": "{c}m3",
                      fontSize: 15,
                      fontWeight: 'bold',
                      color: '#34DCFF'
                  }
                },
                "symbolPosition": "end",
                "data": data1
            },
            
            //最外层柱状体宽度、颜色设置
            {
                name: '',
                type: 'bar',
                barWidth: barWidth,
                barGap: '-100%',
                z:0,
                itemStyle: {
                    color: '#163F7A',
                    opacity:.7,
                },
                data: data2
            }
 
        ]
};

• 感谢博主 https://www.jb51.net/article/235583.htm