目录：
- 效果图
- 封装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>
如图：
