echarts实现3D柱状图

最新推荐文章于 2025-03-26 10:50:02 发布

半城烟沙丶

最新推荐文章于 2025-03-26 10:50:02 发布

阅读量4.5k

点赞数

分类专栏： echarts 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/zlm_email/article/details/106031840

版权

echarts 专栏收录该内容

4 篇文章

订阅专栏

Echarts实现3D柱状图

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <title>柱状图</title>
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="echarts.min.js"></script>
    <script type="text/javascript">
        let dom = document.getElementById("container");
        let myChart = echarts.init(dom);
        let dataX = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
        let data = [220, 182, 191, 234, 290, 330, 360];
        option = {
            grid: {
                containLabel: true,
                left: '10%',
                top: "9%",
                bottom: "10%",
            },
            xAxis: {
                data: dataX
            },
            yAxis: {},
            grid: {
                bottom: "10%"
            },
            series: [{
                type: 'bar',
                barWidth: 17,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var colorList = ['#0bebf9', '#07bcf8', '#f488f2', '#fcf367', '#fcf912', '#fa14c6', '#184dfa'];
                            if (params.dataIndex >= colorList.length) {
                                index = params.dataIndex - colorList.length;
                            }
                            return colorList[params.dataIndex]
                        },
                        barBorderRadius: [0, 0, 0, 0]
                    }
                },
                data: data
            }, {
                name: 'a',
                tooltip: {
                    show: false
                },
                type: 'bar',
                barWidth: 17,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var colorList = ['#0bebf9', '#07bcf8', '#f488f2', '#fcf367', '#fcf912', '#fa14c6', '#184dfa'];
                            if (params.dataIndex >= colorList.length) {
                                index = params.dataIndex - colorList.length;
                            }
                            return colorList[params.dataIndex]
                        },
                        barBorderRadius: [0, 0, 0, 0]
                    }
                },
                data: data,
                barGap: 0
            }, {
                name: 'b',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var colorList = ['#0bebf9', '#07bcf8', '#f488f2', '#fcf367', '#fcf912', '#fa14c6', '#184dfa'];
                            if (params.dataIndex >= colorList.length) {
                                index = params.dataIndex - colorList.length;
                            }
                            return colorList[params.dataIndex]
                        },
                        borderWidth: 1,
                        borderColor: '#fff',
                        label: {
                            show: true,
                            position: 'top',
                        }
                    }
                },
                symbol: 'rect',
                symbolRotate: 45,
                symbolSize: ['24', '24'],
                symbolOffset: ['0', '-11'],
                symbolPosition: 'end',
                data: data,
                z: 3
            }, {
                name: 'c',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var colorList = ['#0bebf9', '#07bcf8', '#f488f2', '#fcf367', '#fcf912', '#fa14c6', '#184dfa'];
                            if (params.dataIndex >= colorList.length) {
                                index = params.dataIndex - colorList.length;
                            }
                            return colorList[params.dataIndex]
                        },
                        borderWidth: 1,
                        borderColor: '#fff',
                    }
                },
                symbol: 'rect',
                symbolRotate: 45,
                symbolSize: ['24', '24'],
                symbolOffset: ['0', '11'],
                symbolPosition: 'start',
                data: data,
                z: 3
            }]
        };
        myChart.setOption(option);
    </script>
</body>

</html>

本人echarts小白，柱状图底部盖住了x轴，一直没有找到办法解决，希望大神可以指导