背景

有时候，为了炫酷。

产品会提一些花里胡哨的需求，比如展示一个柱状图，但是要求有 3D 效果。

基于 Echarts

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      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);
    </script>
  </body>
</html>

基于 HighCharts

https://www.highcharts.com/demo/3d-column-interactive

参考资料

https://www.highcharts.com/demo/3d-column-interactive