首先需要引入几个JS:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="/path/to/js/axios.min.js"></script>
<script src="/vendor/laravel-admin-ext/chartjs/Chart.bundle.min.js"></script>

然后body部分：

<div id="app">
    <canvas id="myChart" style="width:200px;hegiht:200px;"></canvas>
</div>

接下来在JS部分：

var app = new Vue({
    el: '#app',
    data: {
//>定义数据
        labels: [],
        datas: [],
    },
    methods: {
        draw() {
        var self = this;
        axios.get('/admin/test?axios').then(function (res) {
//>遍历处理数据
            for (var key in res.data.labs) {
                self.labels.push(res.data.labs[key]);
            }
            for (var key in res.data.data) {
                self.datas.push(res.data.data[key]);
            }
//>开始图表绘制
            var ctx = document.getElementById("myChart").getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',  //>bar为柱状图，line为折线图，还有其他的图表方式，可以按照自己需求，从官方文档中获取更多类型
                data: {
                    labels: self.labels,      //>x轴标签
                    datasets: [{
                        label: "",         //>第一个标签
                        data: self.datas,   //>展示数据
                        backgroundColor: [      //>柱状图背景色，折线图的话就是填充背景色，如果存在多个数据则用数组，单条数据则不需使用数组。
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(26,66,230,0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                        ],
                        borderColor: [           //>边框颜色
                            'rgba(255,99,132,1)',
                            'rgba(26,66,230,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                        ],
                        borderWidth: 1    //>边框宽度
                    }]
                },
                options: {
                    categoryPercentage: 1.0,
                    legend: false,    //>是否显示图标顶部图示
                    title: {       //>图标顶部标题显示，可以用来显示一些统计信息之类的
                        display: true,
                        text: 'this is title'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            beginAtZero: true,
                        }],
                        yAxes: [{
                            ticks: {
                                barPercentage: 1.0,
                                beginAtZero: true
                            },
                        }]
                    }
                }
            });
            }, function (err) {

            })
        }
    },
    mounted() {

    },
    created() {
        this.draw();
    }
})