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'