父组件
<template>
<div class="bos">
<myecharts :id='b' :obj='list'></myecharts>
<myecharts :id='c' :obj='arr'></myecharts>
</div>
</template>
<script>
import myecharts from '../components/myechatrs.vue'
export default {
data(){
return{
b:'two',
c:"ser",
arr:{
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}]
},
list:{
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
}
}
},
components:{
myecharts
}
}
</script>
<style scoped>
.bos{
width:100%;
height:100%;
display: flex;
}
</style>
子组件
<template>
<div :id="id" :style="{width:'600px',height:'600px'}"></div>
</template>
<script>
export default {
data(){
return{
}
},
props:['id','obj'],
mounted(){
this.myeachtrs();
},
methods:{
myeachtrs(){
let myChart = this.$echarts.init(document.getElementById(this.id));
myChart.setOption(this.obj)
}
}
}
</script>