使用css画刻度图表

使用css画刻度图表

很多时候呢，一些比较简单的图表都会选择自己写，也不想引入echart或者其他第三方组件。那么今天呢，就来讲讲其中一个案例，如何使用css来实现以下图表：

基本代码（使用vue）如下：

<template>
    <div class="container">
        <div class="container_chart">
            <div
                class="container_chart_item"
                v-for="(item, index) of data"
                :key="index"
            >
                <div class="item_name">{{item.name}}</div>
                <div class="item_line">
                    <div class="item_line_all" :style="{ width: `${(item.value / item.total) * 320}px`, background: `${dataColor[index]}` }"></div>
                    <div
                        class="item_line_single"
                        v-for="(item) of parseInt((item.value / item.total) * 320 / 30)"
                        :key="item"
                        :style="{left: `${(item * 30 + (item - 1) * 2)}px`}"
                    >
                    </div>
                </div>
                <div class="item_num">
                    {{item.total}} / <span class="item_value">{{item.value}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'bedOccupancy',
    data() {
        return {
            data: [
                {
                    name: '吃饭',
                    value: 1354,
                    total: 1523,
                },
                {
                    name: '睡觉',
                    value: 649,
                    total: 689,
                },
                {
                    name: '旅游',
                    value: 1193,
                    total: 1310,
                },
                {
                    name: '唱歌',
                    value: 100,
                    total: 200,
                },
            ],
            dataColor: [
                'linear-gradient(90deg, #023063 0%, #01AEFF 100%)',
                'linear-gradient(90deg, #08475E 0%, #37F6FF 100%)',
                'linear-gradient(90deg, #122F01 0%, #88DD77 100%)',
                'linear-gradient(90deg, #10467D 0%, #4782CB 100%)',
            ],
        };
    },
};
</script>

<style scoped lang="scss">
.container {
    width: 775px;
    height: 383px;
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 30px;

    &_chart {
        width: 775px;
        margin-left: 25px;
        margin-top: 60px;

        &_item {
            display: flex;
            align-items: center;
            width: 100%;
            height: 60px;
            margin-bottom: 23px;
            background: url('~@/assets/img/bed/bedOccupancy/itemBg.png') no-repeat;

            .item_name {
                margin-left: 33px;
                margin-right: 17px;
                font-size: 28px;
                font-family: SourceHanSansCN;
                font-weight: 400;
                color: #FFFFFF;
                white-space: nowrap;
                overflow: hidden;
            }

            .item_line {
                position: relative;
                width: 320px;
                height: 16px;
                background: url('~@/assets/img/bed/bedOccupancy//lineBg.png') no-repeat;
                margin-right: 10px;
                margin-right: 16px;

                &_all {
                    height: 100%;
                }

                &_single {
                    position: absolute;
                    top: 0;
                    height: 100%;
                    width: 2px;
                    background: rgba(12, 30, 48, 1);
                }
            }

            .item_num {
                text-align: right;
                width: 216px;
                margin-right: 15px;
                font-size: 38px;
                font-family: DINPro;
                font-weight: 400;
                color: #Fff;
                white-space: nowrap;
                overflow: hidden;

                .item_value {
                    color: rgba(89, 245, 255, 1);
                }
            }
        }
    }
}
</style>