冰山图

描述:当前是关于Echarts图表中的 象形柱图 示例。
 
            option = {
    "title": {
        "text": "",
        "left": "center",
        "textStyle": {
            "fontSize": 20,
            "color": "rgb(85,85,85)"
        }
    },
    "dataset": {
        "source": [{
            "zzmmmc": "2017",
            "人数": 6588
        },
        {
            "zzmmmc": "2018",
            "人数": 4343
        },
        {
            "zzmmmc": "2019",
            "人数": 3159
        },
        {
            "zzmmmc": "2020",
            "人数": 6149
        }]
    },
    "grid": {
        "left": "2%",
        "right": "2%",
        "containLabel": true
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "shadow"
        },
        "enterable": true,
        "extraCssText": "max-height:300px; overflow-y:auto;",
    },
    "legend": {
        "show": false,
        "type": "scroll",
        "orient": "horizontal",
        "x": "center",
        "y": "bottom",
        "icon": "rect",
        "textStyle": {
            "color": "rgb(85,85,85)",
            "fontSize": 12
        },
        "data": ["人数"]
    },
    "xAxis": [{
        "inverse": false,
        "name": "",
        "type": "category",
        "position": "bottom",
        "boundaryGap": true,
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#2db2ee",
                "width": 1
            }
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": "rgb(221,221,221)"
            }
        },
        "axisLabel": {
            "show": true,
            "fontSize": 12,
            "color": "rgb(85,85,85)",
            "rotate": 0
        },
        "axisTick": {
            "show": false
        },
        "nameTextStyle": {
            "color": "rgb(85,85,85)",
            "fontSize": 12
        }
    }],
    "yAxis": [{
        "inverse": false,
        "name": "",
        "type": "value",
        "boundaryGap": [0, "20%"],
        "position": "left",
        "axisLabel": {
            "show": true,
            "fontSize": 12,
            "color": "rgb(85,85,85)"
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#2db2ee",
                "width": 1
            }
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": "#2db2ee"
            }
        },
        "axisTick": {
            "show": false
        },
        "nameTextStyle": {
            "color": "rgb(85,85,85)",
            "fontSize": 12
        }
    }],
    "series": [{
        "type": "pictorialBar",
        "smooth": true,
        "name": "人数",
        "barGap": "0%",
        "symbol": "path://d='M150 0 L75 200 L225 200 Z'",
        "dimensions": ["zzmmmc", "人数"],
        "connectNulls": true,
        "barWidth": "45%",
        "label": {
            "normal": {
                "show": false,
                "textStyle": {
                    "fontSize": 14,
                    "color": "#1890ff"
                },
                "position": "top",
                "formatter": "{@[1]}"
            }
        },
        "itemStyle": {
            "normal": {
                "color": function(params){
                    let list = [
                        {
                    "x": 0,
                    "y": 0,
                    "y2": 0,
                    "x2": 1,
                    "global": false,
                    "colorStops": [{
                        "offset": 0,
                        "color": "#1ABAE1"
                    },
                    {
                        "offset": 0.5,
                        "color": "#1ABAE1"
                    },
                    {
                        "color": "#17D1FF",
                        "offset": 0.5
                    },
                    {
                        "offset": 1,
                        "color": "#17D1FF"
                    }],
                    "type": "linear"
                },
                {
                    "x": 0,
                    "y": 0,
                    "y2": 0,
                    "x2": 1,
                    "global": false,
                    "colorStops": [{
                        "offset": 0,
                        "color": "rgb(28,207,108)"
                    },
                      {
                        "color": "rgb(34,210,113)",
                        "offset": 0.5
                    },
                    {
                        "offset": 0.5,
                        "color": "rgb(79,232,147)"
                    },
                    {
                        "offset": 1,
                        "color": "rgb(79,232,147)"
                    }],
                    "type": "linear"
                },
                   {
                    "x": 0,
                    "y": 0,
                    "y2": 0,
                    "x2": 1,
                    "global": false,
                    "colorStops": [{
                        "offset": 0,
                        "color": "rgb(228,158,22)"
                    },
                      {
                        "color": "rgb(244,180,57)",
                        "offset": 0.5
                    },
                    {
                        "offset": 0.5,
                        "color": "rgb(230,161,26)"
                    },
                    {
                        "offset": 1,
                        "color": "rgb(244,180,57)"
                    }],
                    "type": "linear"
                },
                    {
                    "x": 0,
                    "y": 0,
                    "y2": 0,
                    "x2": 1,
                    "global": false,
                    "colorStops": [{
                        "offset": 0,
                        "color": "rgb(217,86,21)"
                    },
                      {
                        "color": "rgb(247,116,51)",
                        "offset": 0.5
                    },
                    {
                        "offset": 0.5,
                        "color": "rgb(247,116,51)"
                    },
                    {
                        "offset": 1,
                        "color": "rgb(244,180,57)"
                    }],
                    "type": "linear"
                },
            ]
            return list[params.dataIndex];
            }
        }
    }
}]
}