vue echarts饼图封装以及同一个组件2个饼图不加载问题解决

0 环境

• 系统：win10
• 前端框架：vue
• 前端IDE：vscode

1 饼图封装

1 安装echarts

npm install echarts --save

2 查看是否安装成功

• 文件查看

  
  
  在vue项目根目录package.json查看

• 界面查看(win+r --> 输入cmd --> 输入vue ui 等待启动)

  
  
  输入vue ui

查看依赖

3 在main.js中引入echarts

import echarts from "echarts";
Vue.prototype.$echarts = echarts;

2 封装组件

1 新建子组件

2 父组件调用子组件

3 效果图

参考图效果

4 2个饼图不加载/没有实时刷新问题

1.使用$nextTick方法 我试了没用 需要在父组件添加v-if判断 存在 加载自子组件(饼图)

2.子组件添加watch 监听父组件传来的值是否变化 来决定是否加载饼图

5 参考地址

vue中使用echarts图表不显示解决办法