第三方組件庫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組件中(注意：需要給組件一個名稱）
完整代碼
<template>
<div id="app">
<h2>{{title}}</h2>
<p>汽車信息：{{car}}</p>
<p>飛機(jī)信息：{{planeName}}-{{planePrice}}</p>
<!-- 3.使用組件 -->
<Element></Element>
</div>
</template>
<script>
// xxx.vue是vue的單文件組件
// 每個vue的單文件組件由三個部分組成：template里面放置模板內(nèi)容，script里面放置js代碼脆霎，style里面放置樣式
// 使用組件的步驟：
// 1.導(dǎo)入組件
import Element from './components/ELement.vue'
export default {
// name選項定義組件的名稱
name: 'App',
// data選項定義組件的數(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組件
- 在Charts組件中導(dǎo)入echarts的所有成員，并轉(zhuǎn)成一個對象
import * as echarts from "echarts"
4.在模板中準(zhǔn)備一個dom用來放置echarts
<div id="main"></div>
5.在mounted生命周期鉤子中設(shè)置echarts
mounted() {
// 基于準(zhǔn)備好的dom夭坪，初始化echarts實例
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: [
// 第一個系列顯示銷量信息
{
name: "銷量",
type: "bar",
data: this.list.map(r=>r.xl)
}
,
// 第二個系列顯示庫存信息
{
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項目中使用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實例
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: [
// 第一個系列顯示銷量信息
{
name: "銷量",
type: "bar",
data: this.list.map(r=>r.xl)
}
,
// 第二個系列顯示庫存信息
{
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>
