Laravel-Admin使用Vue给ChartJS动态增加数据 首先需要引入几个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(); } })