這兩天需要實(shí)現(xiàn)一個(gè)3D圓柱圖，一開(kāi)始選用的是Highcharts插件，其中有自帶的3D圓柱體類型cylinder，但是柱寬和顏色都不太容易控制，后來(lái)無(wú)奈選用Echarts的3D圖形實(shí)現(xiàn)，不過(guò)貌似涉及3D實(shí)現(xiàn)的都不太好控制，總是不能按照自己的想法來(lái)，最后取了個(gè)巧，用echarts的2D來(lái)組合成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": "數(shù)據(jù)上橢圓",
                    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, [{//調(diào)用圖形相關(guān)方法——漸變色生成器
                                    offset: 0,                      //這四個(gè)參數(shù)用于配置漸變色起止位置，依次對(duì)應(yīng)右/下/左/上四個(gè)方位
                                    color: "rgba(25,223,221,.7)"    //數(shù)組，用于配置顏色漸變過(guò)程，每一項(xiàng)為一個(gè)對(duì)象，包含offset和color兩個(gè)參數(shù)
                                },                                  //offset的范圍0-1,對(duì)應(yīng)位置
                                {
                                    offset: 1,
                                    color: "rgba(25,223,221,.3)"
                                }
                            ]),
                        },
                    },
                    data: yData
                },
            ]
        };
        // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
        myChart.setOption(option);

bar-simple.png