先來看下實(shí)現(xiàn)效果
沒有填充數(shù)據(jù)時(shí)截圖.png
數(shù)據(jù)填充完成截圖.png
思路
組件化開發(fā)，也就是說復(fù)用的代碼整合成公共的模塊鹊汛，供需要時(shí)使用
也可以理解為當(dāng)多組功能相同的對(duì)象,有不同的表現(xiàn)形式蒲赂，即功能一樣，但是不同的表現(xiàn)形式（比如說是柱狀圖中不同的數(shù)據(jù)展現(xiàn)刁憋，或者是顏色樣式等等）
- 上圖中滥嘴，柱狀圖為子組件，子組件中封裝好了一個(gè)畫出柱狀圖的方法至耻，需要傳入一些值便可以使用
在這里若皱，傳值是重要的操作，子組件去接收父組件傳來的值以后尘颓，重繪這個(gè)柱狀圖走触，監(jiān)聽也是很重要的操作
直接上代碼：
柱狀圖子組件.vue
<template>
<div class="bar" id="bar">
</div>
</template>
<script>
export default {
name : "Bar",
//接收從父組件傳回的值
props: ["getData"],
data() {
return {};
},
//實(shí)時(shí)監(jiān)聽父組件傳過來的值，進(jìn)而執(zhí)行drawBar方法疤苹，重繪柱狀圖
watch:{
getData:{
handler(value){
this.drawBar(value)
},
deep: true
}
},
mounted() {
this.drawBar();
},
methods: {
drawBar({
textTitle = "",
nameTitle = "",
nameArray = [],
dataArray = [],
colorArray = []
} = {}) {
let barBox = this.$echarts.init(document.getElementById("bar"));
let option = {
title: {
text : textTitle,
left : "center",
top : 20,
textStyle: {
color: "#000"
}
},
tooltip: {
trigger : "axis",
axisPointer: {
type: "shadow"
}
},
xAxis: [
{
type : "category",
data : nameArray,
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name : nameTitle,
type : "bar",
barWidth : "60%",
data : dataArray,
itemStyle: {
normal: {
color: function(params) {
var colorList = colorArray;
return colorList[params.dataIndex];
}
}
}
}
]
};
barBox.setOption(option, true);
}
}
};
</script>
<style scoped>
</style>
下面是調(diào)用這個(gè)子組件的父組件
父組件.vue
<template>
<div class="About">
<div class="print_box">
<div class="input_some">
<span>輸入標(biāo)題：</span><input
style = "width:300px;"
type = "text"
v-model = "objectData.textTitle"
placeholder = "請(qǐng)輸入標(biāo)題"
>
</div>
<div class="input_some">
<span>輸入數(shù)據(jù)描述：</span><input
style = "width:300px;"
type = "text"
v-model = "objectData.nameTitle"
placeholder = "請(qǐng)輸入數(shù)據(jù)描述,默認(rèn)為‘?dāng)?shù)據(jù)類型’"
>
</div>
<div class="input_some">
<div class="text_weight">選擇顏色后點(diǎn)擊添加按鈕</div>
<span>選擇顏色：</span><input
type = "color"
v-model = "colorData"
placeholder = "請(qǐng)輸入數(shù)據(jù)描述,默認(rèn)為‘?dāng)?shù)據(jù)類型’"
>
<button @click="addColorClick">addColor</button>
{{objectData.colorArray}}
</div>
<div class="input_some">
<div class="text_weight">選擇顏色后點(diǎn)擊添加按鈕</div>
<input
style = "width:180px;"
type = "text"
v-model = "leftData"
placeholder = "請(qǐng)輸入數(shù)據(jù)"
>
<input
style = "width:180px;"
type = "text"
v-model = "rightData"
placeholder = "請(qǐng)輸入數(shù)據(jù)對(duì)應(yīng)字段"
>
<button @click=addDataClick()>addData</button>
<div>數(shù)據(jù)為：{{objectData.dataArray}}</div>
<div>字段為：{{objectData.nameArray}}</div>
</div>
<div class="input_some">
<button @click="clearAll()">清空所有數(shù)據(jù)</button>
</div>
</div>
<Bar
class = "about_bar"
:get-data = "objectData"
></Bar>
</div>
</template>
<script>
import Bar from "./template/Bar";
export default {
name: "About",
data() {
return {
objectData: {
textTitle : "",
nameTitle : "",
nameArray : [],
dataArray : [],
colorArray: []
},
leftData : "",
rightData: "",
colorData: "#000000"
};
},
components: {
Bar
},
mounted() {},
methods: {
addDataClick() {
this.objectData.dataArray.push(this.leftData);
this.objectData.nameArray.push(this.rightData);
},
addColorClick() {
this.objectData.colorArray.push(this.colorData);
},
clearAll() {
for (const key in this.objectData) {
const element = this.objectData[key];
if (typeof element == "string") {
this.objectData[key] = "";
}else if (typeof element == "object") {
this.objectData[key] = [];
}
}
}
}
};
</script>
<style scoped>
.about_bar {
width : 100%;
height: 300px;
}
.print_box {
width : 90%;
height : 300px;
padding: 20px;
}
.input_some {
margin-top: 5px;
border-top: 1px solid #ccc;
}
.text_weight {
font-size : 22px;
font-weight: 800;
}
</style>
輸入框只是為了模擬傳入的數(shù)據(jù)互广，最主要的就是把父組件中的objectData傳入子組件即可
實(shí)際開發(fā)中，ajax請(qǐng)求到數(shù)據(jù)后卧土，處理完成惫皱，賦值給objectData即可，子組件中因?yàn)橛衱atch監(jiān)聽這個(gè)objectData尤莺，所以旅敷，會(huì)實(shí)時(shí)刷新柱狀圖
一個(gè)簡單粗暴的柱狀圖小組件，優(yōu)化完善的地方還有很多颤霎，不過這個(gè)例子足以表達(dá)組件化開發(fā)是怎么樣實(shí)現(xiàn)的媳谁，之前有前輩說可以用vuex，不過我覺得組件傳值就夠了捷绑，殺雞焉用牛刀韩脑？
插一嘴，main.js中引入Echarts代碼??
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import Echarts from 'echarts'
Vue.config.productionTip = false
Vue.prototype.$echarts = Echarts
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
這里卿洋
愿喜??
