背景

有时候，为了炫酷。

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

基于 Echarts

  [js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!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