Vue-cli中使用第三方组件库Element-UI&ECharts

第三方组件库Element-UI
可参考Element-UI官方文档，地址：https://element.eleme.io/#/zh-CN/component/installation
1.安装Element-UI
在终端中打开，输入指令

npm i element-ui -S

出现“+ [email protected]版本号”，则默认安装完成

2.引入Element-ui

// 导入ElementUI组件库
import ElementUI from 'element-ui';
// 导入ElementUI组件库的样式
import 'element-ui/lib/theme-chalk/index.css';
// 由于ElementUI组件库是插件，所有必须要use
Vue.use(ElementUI);

3.注册组件Element
4.在Element-UI官网中选择需要的样式，复制代码贴到Element组件中(注意：需要给组件一个名称）
完整代码

第三方组件库Echarts(数据可视化图标库）
可参考Echarts官方文档，地址：https://echarts.apache.org/zh/index.html
1.安装Echarts

npm install echarts -S

2.新建Charts组件

3. 在Charts组件中导入echarts的所有成员，并转成一个对象

import * as echarts from "echarts"

4.在模板中准备一个dom用来放置echarts

5.在mounted生命周期钩子中设置echarts

 mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "产品销售信息",
        subtext:'2021-12-8'
      },
      legend:{
          
      },
      tooltip: {},
      xAxis: {
        // 获取X轴的数据
        data: this.list.map(r=>r.title)
      },
      yAxis:{},
      // 获取系列数据 
      series: [
        // 第一个系列显示销量信息
        {
          name: "销量",
          type: "bar",
          data: this.list.map(r=>r.xl)
        }
        ,
        // 第二个系列显示库存信息
        {
          name: "库存",
          type: "bar",
          data: this.list.map(r=>r.kc)
        }
      ],
    });
  },

5.配置echarts数据

data() {
      return {
          list:[
              {
                  title:'衬衫',
                  xl:5,
                  kc:9
              },
              {
                  title:'羊毛衫',
                  xl:20,
                   kc:19
              },
              {
                  title:'雪纺衫',
                  xl:36,
                   kc:55
              },
              {
                  title:'裤子',
                  xl:10,
                   kc:2
              },
              {
                  title:'高跟鞋',
                  xl:10,
                   kc:5
              },
              {
                  title:'袜子',
                  xl:20,
                   kc:35
              }
          ]

完整代码：

6.在App.vue中引入Echarts组件

import Charts from './components/Charts.vue'

7.注册Echarts组件

components: {
  Charts
  }

8.使用Echarts组件

完整代码