echarts饼图封装vue2

在Vue2中封装echarts饼图可以使用chartPan.vue组件。在该组件中，可以通过设置chart-type属性为"pie"来指定使用饼图。同时，可以设置chart-height属性来定义饼图的高度。在组件中，可以使用slot来自定义右侧的内容，比如添加刷新按钮和放大按钮。在代码中，可以通过this.$refs来引用chartPan组件，并调用lineInit方法来初始化饼图的数据。具体的代码示例如下：

<chartPan ref="pie" chart-type="pie" chart-height="200px">
  <div slot="right">
    <i class="iconfont icon-color icon-shuaxin" @click="refreshPieChart" />
    <i class="iconfont icon-color icon-fangda" style="margin-left: 12px" @click="zoomInPieChart" />
  </div>
</chartPan>

// 在组件中引用chartPan组件，并初始化饼图数据
this.$refs.pie ? this.$refs.pie.lineInit(chartDate, chartData, '(%)', this.tab) : '';

以上代码中的chartDate和chartData分别表示饼图的日期和数据。通过调用lineInit方法，可以将这些数据传递给chartPan组件，从而实现饼图的封装和展示。
#### 引用[.reference_title]
- *1* *2* [vue2之echarts的封装 折线图，饼图，大图](https://blog.csdn.net/weixin_47409897/article/details/130371366)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]