使用vue写一个饼状图
时间: 2023-05-23 21:04:03 浏览: 123
好的,以下是使用 Vue 写一个饼状图的示例代码:
```html
<template>
<div class="pie-chart">
<canvas ref="canvas"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js';
export default {
data() {
return {
chartData: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'My First Dataset',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(153, 102, 255)',
'rgb(255, 159, 64)'
]
}]
}
}
},
mounted() {
const ctx = this.$refs.canvas.getContext('2d');
new Chart(ctx, {
type: 'pie',
data: this.chartData
});
}
}
</script>
<style>
.pie-chart {
width: 400px;
height: 400px;
}
</style>
```
这个例子使用 Chart.js 库创建一个饼状图,数据和颜色都是随机指定的,你可以根据自己的需求修改。然后在 Vue 组件中,使用 `<canvas>` 元素来展示图表,`mounted` 钩子函数中创建 Chart 实例并传入数据即可。