<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()
​
     }
   }  
</script>