<template>
<el-row>
<el-col :span="12">
<div id="zxt1" style="width:100%;height:500px;"></div>
</el-col>
<el-col :span="12">
<div id="zxt2" style="width:100%;height:500px;"></div>
</el-col>
</el-row>
</template>
<script>
import echarts from 'echarts'
export default {
// el:"app",
data(){
return{
zxt1:null,
zxt2:null
}
},
methods:{
initchart1(){
// 基于准备好的dom，初始化echarts实例
this.zxt1 = echarts.init(document.getElementById('zxt1'));
// 指定图表的配置项和数据
this.zxt1.setOption({
title:{
text:"柱形图"
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
});
},
initchart2(){
this.zxt2= echarts.init(document.getElementById("zxt2"));
this.zxt2.setOption({
title:{
text:"折线图"
},
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'
}]
})
}
},
mounted: function () {
this.initchart1(),
this.initchart2()
},
updated: function () {
this.initchart1(),
this.initchart2()
}
}
