写出'vue画饼状图,后端提供数据'的代码
时间: 2023-04-11 10:01:02 浏览: 79
以下是一个简单的示例代码,用于在 Vue 中绘制饼状图并从后端获取数据:
<template>
<div>
<canvas ref="chart"></canvas>
</div>
</template>
<script>
import axios from 'axios';
import Chart from 'chart.js';
export default {
mounted() {
axios.get('/api/data').then(response => {
const data = response.data;
const labels = data.map(item => item.label);
const values = data.map(item => item.value);
const ctx = this.$refs.chart.getContext('2d');
new Chart(ctx, {
type: 'pie',
data: {
labels,
datasets: [{
data: values,
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56',
'#8BC34A',
'#9C27B0',
'#3F51B5',
'#FF9800',
'#795548',
'#607D8B',
],
}],
},
});
});
},
};
</script>
请注意,这只是一个简单的示例代码,您需要根据您的具体情况进行修改和调整。