index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>YanProgress</title>
</head>

<body>
    <div id="app">
        <yan-progress :total="100" :done="60" :modify="30" :tip='
            [
                {
                    text: "未提交X个",
                    fillStyle: "rgb(150, 150, 150)",
                }, {
                    text: "已提交X个",
                    fillStyle: "rgb(174, 193, 17)",
                }, {
                    text: "已批改X个",
                    fillStyle: "rgb(249, 149, 0)"
                }
            ]
            '></yan-progress>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
    <script src="dist/YanProgress.min.js"></script>
    <script>
        new Vue().$mount("#app");
    </script>
</body>

</html>