用Echarts解决3D圆柱图形的可控实现问题

这两天需要实现一个3D圆柱图，一开始选用的是Highcharts插件，其中有自带的3D圆柱体类型cylinder，但是柱宽和颜色都不太容易控制，后来无奈选用Echarts的3D图形实现，不过貌似涉及3D实现的都不太好控制，总是不能按照自己的想法来，最后取了个巧，用echarts的2D来组合成3D圆柱体，效果还可以，宽度和颜色渐变都能够很容易控制，贴出以下代码分享以下：

var myChart = echarts.init(document.getElementById('main'));
        var xData = ["8-5", "8-6"];
        var yData = [50, 87.3];
        var color="#19dfdd";
        var shadowColor="#0b5767";
        var barWidth=50;
        var option = {
            backgroundColor: '#05233b',
            "grid": {
                "top": "25%",
                "left": "5%",
                "bottom": "5%",
                "right": "5%",
                "containLabel": true
            },
            animation: false,
            "xAxis": [{
                "type": "category",
                "data": xData,
                "axisTick": {
                    "alignWithLabel": true
                },
                "nameTextStyle": {
                    "color": "#82b0ec"
                },
                "axisLine": {
                    show: true,
                    "lineStyle": {
                        "color": "#82b0ec",
                        "type":"solid",
                        "width":3
                    }
                },
                "axisLabel": {
                    "textStyle": {
                        "color": color
                    },
                    margin: 30
                }
            }],
            "yAxis": [{
                "type": "value",
                "axisLabel": {
                    "textStyle": {
                        "color": "#fff"
                    },
                },
                "splitLine": {
                    "lineStyle": {
                        "color": "#0c2c5a"
                    }
                },
                "axisLine": {
                    "show": true,
                    "lineStyle":{
                        "color":"#fff",
                        "type":"solid",
                        "width":3
                    }
                },
                "min":0,
                "max":function(value){
                    return Math.ceil(value.max/20)*20;//向上取整，Math.floor为向下取整
                },
                "interval":20
            }],
            "series": [
                {
                    "name": "数据上椭圆",
                    type: 'pictorialBar',
                    symbolSize: [barWidth, 10],
                    symbolOffset: [0, -6],
                    symbolPosition: 'end',
                    z: 12,
                    "label": {
                        "normal": {
                            "show": true,
                            "position": "top",
                            fontSize: 14,
                            color: color,
                            formatter:function(params,index){
                                return params.value;
                            }
                        }
                    },
                    color: "#2DB1EF",
                    data: yData
                },
                {
                    name: '下椭圆',
                    type: 'pictorialBar',
                    symbolSize: [barWidth, 10],
                    symbolOffset: [0, 7],
                    z: 12,
                    "color": color,
                    "data": yData
                },
                {
                    type: 'bar',//类型
                    "barWidth": barWidth,//柱子宽度
                    barGap: '10%', //不同系列柱间距离，这里为柱子宽度的10%
                    barCateGoryGap: '10%',//同一系列柱间距离
                    itemStyle: {//图形样式
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{//调用图形相关方法——渐变色生成器
                                    offset: 0,                      //这四个参数用于配置渐变色起止位置，依次对应右/下/左/上四个方位
                                    color: "rgba(25,223,221,.7)"    //数组，用于配置颜色渐变过程，每一项为一个对象，包含offset和color两个参数
                                },                                  //offset的范围0-1,对应位置
                                {
                                    offset: 1,
                                    color: "rgba(25,223,221,.3)"
                                }
                            ]),
                        },
                    },
                    data: yData
                },
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

bar-simple.png