vue饼图组件_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 新建子组件

import * as echarts from 'echarts';

require('echarts/theme/shine'); //引入主题

export default {

name: 'echartscom',

// id --> 为了多图渲染

// title --> 标题

// chartData --> value数组

// nameData --> name数组

props: ['id', 'title'