vue echarts饼图代码

### Vue集成ECharts制作饼状图 #### 安装依赖库 为了在Vue项目中使用ECharts，需安装`echarts`包。 ```bash npm install echarts --save ``` #### 创建Vue组件并初始化ECharts实例 下面是一个完整的Vue组件示例，展示了如何创建一个简单的饼图： ```javascript <template> <div ref="chartContainer" style="width: 600px;height:400px;"></div> </template> <script> import * as echarts from 'echarts'; export default { name: "PieChart", data() { return { chart: null, chartData: [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ] }; }, mounted() { // 初始化ECharts实例 this.chart = echarts.init(this.$refs.chartContainer); const option = { title: { text: '某站点用户来源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: '访问来源', type: 'pie', radius: '50%', data: this.chartData, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 this.chart.setOption(option); window.addEventListener('resize', this.resizeHandler); }, beforeDestroy() { if (this.chart) { window.removeEventListener('resize', this.resizeHandler); this.chart.dispose(); } }, methods: { resizeHandler() { if (this.chart) { this.chart.resize(); } } } }; </script> <style scoped> /* 可选样式 */ </style> ``` 此代码片段定义了一个名为`PieChart`的Vue单文件组件，在其中实现了基本的饼图展示功能[^1]。该组件会在挂载完成后立即初始化ECharts实例，并设置相应的选项来呈现饼图；当窗口大小发生变化时会调整图表尺寸以适应新的布局环境。