带点击事件的进度条组件

<template>
    <div class="chart-progress-lang">
        <div v-if="!isNoData" class="content">
            <template v-for="(item, index) in data">
                <div :key="index" class="bui-dib item" :class="{'curr-item': index === currIndex}" @click.stop="switchItem(index, item.id)">
                    <div class="name">{{ item.name }}</div>
                    <div class="progress-cont">
                        <div class="progress-item" :style="item.width"></div>
                    </div>
                    <div class="value">{{ item.percent }}</div>
                    <div class="unit-bfh">%</div>
                </div>
            </template>
        </div>
        <EmptyData v-if="isNoData"></EmptyData>
    </div>
</template>

<script>
import { EmptyData  } from '@common/OtherComp'
export default {
    name: 'chartProgress',
    components: {
        EmptyData
    },
    props: {
        list: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data () {
        return {
            currIndex: 0
        }
    },
    computed: {
        // 判断图表是否有数据，true 无数据、false 有数据
        isNoData () {
            let flag = true; // 默认无数据
            const series = this.list;
            if (series.length > 0) {
                flag = false;
            }
            return flag
        },
        data () {
            const that = this;
            const array = that.list.map((item, index) => {
                item.width = {
                    width: item.percent + '%'
                };
                return item
            });
            return array
        }
    },
    watch: {},
    methods: {
        switchItem (index, id) {
            this.currIndex = index;
            this.$emit('switchItem', id)
        }
    },
    mounted () {}
}

</script>
<style lang='less' scoped>
    .bui-dib {
        font-size: 0;
        box-sizing: border-box;
        > div {
            display: inline-block;
            font-size: 14px;
            box-sizing: border-box;
            vertical-align: middle;
        }
    }
    .chart-progress-lang {
        width: 100%;
        height: 100%;
        padding: 30px 0;
        .content {
            .item {
                height: 70px;
                line-height: 70px;
                position: relative;
                cursor: pointer;
                > div {
                    vertical-align: middle;
                }
                .name {
                    width: 105px;
                    text-align: right;
                    color: #333333;
                    font-size: 12px;
                }
                .value {
                    font-weight: bold;
                    color: #333333;
                    font-size: 12px;
                }
                .progress-cont {
                    width: calc(~"100% - 210px");
                    height: 6px;
                    border-radius: 3px;
                    margin: 0 20px;
                    background-color: #dddddd;
                    position: relative;
                    .progress-item {
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        background-color: #5c6bc0;
                        background-image: linear-gradient(to right, #8696f5 0%, #5c6bc0 100%);
                        width: 60%;
                        height: 10px;
                        border-radius: 5px;
                    }
                }
                .percent {
                    width: 20px;
                }
                .unit-bfh {
                    width: 20;
                }
                &.curr-item {
                    background-color: #E5EDF5;
                    &::after {
                        content: '';
                        width: 0;
                        height: 0;
                        border-top: 12px solid transparent;
                        border-left: 12px solid #E5EDF5;
                        border-bottom: 12px solid transparent;
                        position: absolute;
                        top: 50%;
                        right: -12px;
                        transform: translateY(-50%);
                    }
                }
            }
        }
    }
</style>

暂无数据组件在主页有单独发布。

<template>
  <div style="width: 500px">
    <chartProgress :list="list" />
  </div>
</template>

<script>
import chartProgress from "_c/ChartsLang/chartProgress";
export default {
  components: {
    chartProgress,
  },
  data() {
    return {
      list: [{ percent: 10 }, { percent: 50 }, { percent: 90 }, { percent: 100 }],
    };
  },
};
</script>

<style></style>