echarts 立体柱状图

城永

已于 2022-11-28 08:38:38 修改

阅读量339

点赞数

文章标签： echarts 前端 javascript

于 2022-11-26 18:24:35 首次发布

本文链接：https://blog.csdn.net/weixin_47133092/article/details/128055208

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
    <style>
        #main {
            width: 924px;
            height: 370px;
            background-color: #0d1934;
        }
    </style>
</head>

<body>
    <div id="main"></div>
</body>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            y: '10',
            textStyle: {
                color: 'white'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            splitLine: {
                //柱状图默认xAxis(false)
                show: true,
                lineStyle: {
                    color: 'rgba(0,0,0,0)',
                }
            },
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
        },
        yAxis: {
            type: 'value',
            splitLine: {
                //柱状图默认xAxis(false)
                show: true,
                lineStyle: {
                    color: 'rgba(0,0,0,0)',
                }
            },
            boundaryGap: [0, 0.01]
        },
        series: [{
            name: "上线数",
            type: "bar",
            barWidth: 24,
            barCategoryGap: 12,
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            label: {
                show: true,
                position: 'top',
                color: 'white'
            },
            itemStyle: {
                // 柱体渐变色
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: "rgba(0, 245, 255, 0.3) ",
                }, {
                    offset: 0.5,
                    color: "#02f7f5",
                }, {
                    offset: 1,
                    color: "rgba(0, 245, 255, 0.3)",
                }, ]),
            },
        }, {
            //上
            name: "上线数",
            type: "pictorialBar",
            symbolSize: [24, 6],
            symbolOffset: [-14, -3],
            z: 12,
            itemStyle: {
                color: "#02f7f5"
            },
            symbolPosition: "end",
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        }, {
            // 柱状
            name: "入库数",
            type: "bar",
            barWidth: 24,
            barCategoryGap: 10,
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            label: {
                show: true,
                position: 'top',
                color: 'white'
            },
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: "rgba(2, 153, 248, 0.3)",
                }, {
                    offset: 0.5,
                    color: "rgba(2, 153, 248, 1)",
                }, {
                    offset: 1,
                    color: "rgba(2, 153, 248, 0.3)",
                }, ]),
            },
        }, {
            // 上
            name: "入库数",
            type: "pictorialBar",
            symbolSize: [24, 6],
            symbolOffset: [14, -3],
            z: 12,
            itemStyle: {
                color: "rgba(2, 153, 248, 1)"
            },
            symbolPosition: "end",
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        }],
    };

    option && myChart.setOption(option);
</script>

</html>