第三方組件庫Element-UI
可參考Element-UI官方文檔，地址：https://element.eleme.io/#/zh-CN/component/installation
1.安裝Element-UI
在終端中打開，輸入指令

npm i element-ui -S

出現(xiàn)“+ element-ui@2.15.6版本號”，則默認(rèn)安裝完成

2.引入Element-ui

// 導(dǎo)入ElementUI組件庫
import ElementUI from 'element-ui';
// 導(dǎo)入ElementUI組件庫的樣式
import 'element-ui/lib/theme-chalk/index.css';
// 由于ElementUI組件庫是插件，所有必須要use
Vue.use(ElementUI);

3.注冊組件Element
4.在Element-UI官網(wǎng)中選擇需要的樣式，復(fù)制代碼貼到Element組件中(注意：需要給組件一個(gè)名稱）
完整代碼

<template>
  <div id="app">
    <h2>{{title}}</h2>
    <p>汽車信息：{{car}}</p>
    <p>飛機(jī)信息：{{planeName}}-{{planePrice}}</p>
    <!-- 3.使用組件 -->
    <Element></Element>
  </div>
</template>

<script>
// xxx.vue是vue的單文件組件
// 每個(gè)vue的單文件組件由三個(gè)部分組成：template里面放置模板內(nèi)容，script里面放置js代碼，style里面放置樣式

// 使用組件的步驟：
// 1.導(dǎo)入組件
import Element from './components/ELement.vue'

export default {
  // name選項(xiàng)定義組件的名稱
  name: 'App',
  // data選項(xiàng)定義組件的數(shù)據(jù)
  data() {
    return {
      title:'歡迎學(xué)習(xí)Vue，月薪過萬不是夢',
      //定義一輛車的信息
      car:{
        name:'奔馳',
        price:'50W'
      },
      //飛機(jī)信息
      planeName:'波音747',
      planePrice:'10Y'
    }
  },
  // 2.注冊組件
  components:{
    Element
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
#app {
  border: 1px solid #eee;
  margin: 10px;
  padding: 10px;
}
</style>

第三方組件庫Echarts(數(shù)據(jù)可視化圖標(biāo)庫）
可參考Echarts官方文檔，地址：https://echarts.apache.org/zh/index.html
1.安裝Echarts

npm install echarts -S

2.新建Charts組件

3. 在Charts組件中導(dǎo)入echarts的所有成員，并轉(zhuǎn)成一個(gè)對象

import * as echarts from "echarts"

4.在模板中準(zhǔn)備一個(gè)dom用來放置echarts

<div id="main"></div>

5.在mounted生命周期鉤子中設(shè)置echarts

 mounted() {
    // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
    var myChart = echarts.init(document.getElementById("main"));
    // 繪制圖表
    myChart.setOption({
      title: {
        text: "產(chǎn)品銷售信息",
        subtext:'2021-12-8'
      },
      legend:{
          
      },
      tooltip: {},
      xAxis: {
        // 獲取X軸的數(shù)據(jù)
        data: this.list.map(r=>r.title)
      },
      yAxis:{},
      // 獲取系列數(shù)據(jù) 
      series: [
        // 第一個(gè)系列顯示銷量信息
        {
          name: "銷量",
          type: "bar",
          data: this.list.map(r=>r.xl)
        }
        ,
        // 第二個(gè)系列顯示庫存信息
        {
          name: "庫存",
          type: "bar",
          data: this.list.map(r=>r.kc)
        }
      ],
    });
  },

5.配置echarts數(shù)據(jù)

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
              }
          ]

完整代碼：

<template>
  <div class="charts">
    <h3>在vue項(xiàng)目中使用ECharts</h3>
    <div id="main"></div>
  </div>
</template>
<script>
// 導(dǎo)入echarts對象
import * as echarts from "echarts";

export default {
  name: "Charts",
  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
              }
          ]
      }
  },
  mounted() {
    // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
    var myChart = echarts.init(document.getElementById("main"));
    // 繪制圖表
    myChart.setOption({
      title: {
        text: "產(chǎn)品銷售信息",
        subtext:'2021-12-8'
      },
      legend:{
          
      },
      tooltip: {},
      xAxis: {
        // 獲取X軸的數(shù)據(jù)
        data: this.list.map(r=>r.title)
      },
      yAxis:{},
      // 獲取系列數(shù)據(jù) 
      series: [
        // 第一個(gè)系列顯示銷量信息
        {
          name: "銷量",
          type: "bar",
          data: this.list.map(r=>r.xl)
        }
        ,
        // 第二個(gè)系列顯示庫存信息
        {
          name: "庫存",
          type: "bar",
          data: this.list.map(r=>r.kc)
        }
      ],
    });
  },
};
</script>
<style>
.charts {
  border: 1px solid blue;
  padding: 10px;
  margin-top: 10px;
}
.charts #main {
  width: 500px;
  height: 300px;
  border: 1px solid red;
}
</style>

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

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

7.注冊Echarts組件

components: {
  Charts
  }

8.使用Echarts組件

<div id="app">
    <Charts></Charts>
  </div>

完整代碼

<template>
  <div id="app">
    <Charts></Charts>
  </div>
</template>
<script>

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

export default {
  name: 'App',
  components: {
  Charts
  }
}
</script>

<style>

</style>