目錄：
- 效果圖
- 封裝Echart組件
- 父組件傳遞值
- 根據不同的組件傳值顯示echarts圖形
一、效果圖
有坐標軸的圖標
- 數據格式
//類目軸
xAxis: {
data: {},
type: 'catagory',
},
//數據部分
yAxis: {
type: 'value'
},
series: []
沒坐標軸的圖標
- 數據格式
{
series： []
}
二、 封裝Echart組件
封裝 Echarts.vue組件
<template>
<div style="height: 100%" ref="echarts"> <!--ref添加屬性元素，通過vm.$ref獲取dom元素-->
echarts
</div>
</template>
<script>
import echarts from 'echarts'
export default {
props: {
chartData: { //定義從父組件傳過來的值
type: Object,
default(){
return {
xData: [],
series: []
}
}
},
isAxisChart: { //判斷是否有坐標軸，判斷是否是餅圖
type: Boolean,
default: true
}
},
computed: {
options() { //通過計算屬性來判斷是不是有坐標
return this.isAxisChart ? this.axisOptions : this.normalOptions
}
},
data(){
return { //動態傳入的參數定義出來
echarts: null,
axisOptions: {
xAxis: [
{
type: 'category',
data: []
}
],
yAxis: [
{
type: 'value'
}
],
series: []
},
normalOptions: {
series: []
}
}
},
watch: { //監聽數據，當我們數據發生變化時再去更新數據
chartData: {
handler: function () {
this.initChart();
},
deep: true
}
},
methods: {
initChart(){ //初始化echarts
this.initChartData();
if(this.echarts){
this.echarts.setOption(this.options)
}else {
this.echarts = echarts.init(this.$refs.echarts);
this.echarts.setOption(this.options)
}
},
initChartData(){ //初始化數據
if(this.isAxisChart) {
this.axisOptions.xAxis.data = this.chartData.xData;
this.axisOptions.series = this.chartData.series;
}else {
console.log('normal');
}
}
}
}
</script>
三、父組件傳遞值
說明：父組件通過傳chartData 傳給 Echarts.vue組件，來渲染 成圖表
<template>
<div>
<el-row class="home" :gutter="20">
<el-col :span="8">
.....
</el-col>
<el-col :span="16">
<div class="num">
.....
</div>
<el-card shadow="hover">
<echarts style="height: 280px" :chartData="echartsData.order"></echarts> <!--使用echarts組件，chartData通過props傳給子組件渲染-->
</el-card>
<div class="graph">
<el-card shadow="hover">
<echarts style="height: 260px"></echarts> <!--使用echarts組件-->
</el-card>
<el-card shadow="hover">
<echarts style="height: 260px"></echarts> <!--使用echarts組件-->
</el-card>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
....
import Echarts from '../../common/Echart' //導入echarts組件
export default {
components:{
Echarts //注冊Rcharts組件
},
data(){
return {
....,
echartsData: { //保存我們echarts數據
order: {
xData: [],
series: []
},
user: {
xData: [],
series: []
},
video: {
series: []
}
}
}
},
methods: {
getTableData(){
this.$http.get('/home/getData').then(res => {
.....
//訂單折線圖
const order = res.data.orderData;
this.echartsData.order.xData = order;
//1.取出series中的name部分->鍵名
let keyArray = Object.keys(order[0]); //獲取對象中所有key名，ES6的語法
//console.log(keyArray);
keyArray.forEach(key => { //通過map獲取value的值
this.echartsData.order.series.push({
name:key === 'wechat' ? '小程序' : key,
data: order.map(item => item[key]),
type: 'line'
})
});
});
}
},
created() {
this.getTableData();
}
}
</script>
四、根據不同的組件傳值顯示echarts圖形
說明：我們其實就是用一個 Echarts.vue，根據echarts的dom去判斷，我們完善的代碼，=> Home.vue
<template>
<div>
<el-row class="home" :gutter="20">
<el-col :span="8">
.....
</div>
<el-card shadow="hover"><!--根據不同的傳值，輸出對應的圖形-->
<echarts style="height: 280px" :chartData="echartsData.order"></echarts>
</el-card>
<div class="graph">
<el-card shadow="hover">
<echarts style="height: 260px" :chartData="echartsData.user"></echarts>
</el-card>
<el-card shadow="hover">
<echarts style="height: 260px" :chartData="echartsData.video"></echarts>
</el-card>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import '../../assets/css/home.css'
import Echarts from '../../common/Echart'
export default {
components:{
Echarts
},
data(){
return {
....,
methods: {
getTableData(){
this.$http.get('/home/getData').then(res => {
....
//用戶柱狀圖
this.echartsData.user.xData = res.data.userData.date;
this.echartsData.user.series.push({
name: '新增用戶',
data: res.data.userData.data.map(item => item.new),
type: 'bar'
});
this.echartsData.user.series.push({
name: '活動用戶',
data: res.data.userData.data.map(item => item.active),
type: 'bar'
});
//視頻餅圖
this.echartsData.video.series.push({
data: res.data.videoData,
type: 'bar'
})
});
}
},
created() {
this.getTableData();
}
}
</script>
如圖：
