vue3+echarts制作饼状图
时间: 2023-11-25 12:05:37 浏览: 122
1. 安装echarts
```bash
npm install echarts --save
```
2. 创建一个Vue组件
```vue
<template>
<div class="pie-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
mounted() {
// 初始化echarts对象
const chartDom = this.$el;
const myChart = echarts.init(chartDom);
// 配置项
const option = {
title: {
text: '饼状图',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
// 设置配置项并渲染图表
myChart.setOption(option);
}
};
</script>
<style scoped>
.pie-chart {
width: 600px;
height: 400px;
}
</style>
```
3. 在Vue应用程序中使用组件
```vue
<template>
<div>
<pie-chart></pie-chart>
</div>
</template>
<script>
import PieChart from './components/PieChart.vue';
export default {
components: {
PieChart
}
};
</script>
```
阅读全文