echarts 进度条实现

<template>
    <div class="container">
        <div id="echart" class="container"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            timmerOneAnim: null,
            myChart: null,
        };
    },
    created() { },
    mounted() {
        this.$nextTick(() => {
            this.Init();
        });
    },
    methods: {
        Init() {
            const echarts = require("echart");
            if (
                //判断是否存在echarts实例化对象,如果存在则销毁
                this.myChart != null &&
                this.myChart != "" &&
                this.myChart != undefined
            ) {
                this.myChart.dispose();
            }
            var myChartDom = document.getElementById("lowerEcharts");
            this.myChart = this.$echarts.init(myChartDom);
            this.myChart.clear(); //清空画布数据
            var option = {
                // backgroundColor: "#031d33",
                grid: {
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0,
                },
                xAxis: {
                    show: false,
                    type: "value",
                    boundaryGap: [0, 0],
                },
                yAxis: [
                    {
                        type: "category",
                        data: [""],
                        axisLine: { show: false },
                        axisTick: [
                            {
                                show: false,
                            },
                        ],
                    },
                ],
                series: [
                    {
                        name: "金额",
                        type: "bar",
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 30,
                                // color: "#00eeff",
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                                    {
                                        offset: 1,
                                        // color: "rgba(255,51,51, 1)",
                                        color: "#56ab2f",
                                    },
                                    {
                                        offset: 0,
                                        // color: "rgba(255,51,51, 0.4)",
                                        color: "#a8e063",
                                    },
                                ]),
                            },
                        },
                        barWidth: 10,
                        data: [60],
                    },
                    {
                        name: "背景",
                        type: "bar",
                        barWidth: 10,
                        barGap: "-100%",
                        data: [100],
                        itemStyle: {
                            normal: {
                                color: "rgba(229,230,231, 0.4)",
                                barBorderRadius: 30,
                            },
                        },
                    },
                ],
            };

            option && this.myChart.setOption(option, true);

            // 设置宽度自适应
            window.addEventListener("resize", () => {
                this.myChart.resize();
            });
        },
    },
    beforeDestroy() { },
};
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
}
</style>

效果图