【Echarts】 电影票房汇总实时数据横向柱状图比图

效果图

code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>圆角柱状图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 900px; height: 500px;"></div>

<script>
    const chartDom = document.getElementById('main');
    const myChart = echarts.init(chartDom);

    const option = {
        tooltip: {
            trigger: 'item' // 更推荐这种单项模式
        },
        grid: {
            left: '100',
            right: '40',
            bottom: '40',
            top: '20',
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                formatter: value => `${value / 10000}万`
            }
        },
        yAxis: {
            type: 'category',
            data: [
                '恶意', '聊斋：兰若寺', '侏罗纪世界：重生', 'F1：狂飙飞车',
                '名侦探柯南：独眼的混沌', '长安的荔枝', '超人', '戏台',
                '螺笔小新：大人王国的反击', '新圳龙高手', '其它'
            ],
            axisLabel: {
                interval: 0,
                formatter: function (name) {
                    return name.length > 6 ? name.slice(0, 6) + '...' : name
                }
            }
        },
        series: [
            {
                name: '播放量',
                type: 'bar',
                data: [
                    446449, 405000, 398000, 392000,
                    300000, 160000, 110000, 90000,
                    80000, 60000, 50000
                ],
                itemStyle: {
                    borderRadius: [0, 10, 10, 0], // 显示右侧圆角
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        {offset: 0, color: '#8dafff'},
                        {offset: 1, color: '#a378ff'}
                    ])
                },
                barWidth: 14
            }
        ]
    }

    myChart.setOption(option);
</script>
</body>
</html>