<template>
  <el-col>
    <el-row class="title">
      <p>{{ title }}</p>
    </el-row>
    <el-row>
      <div ref="chart" style="width:100vw;margin:0 3px;" ></div>
    </el-row>
  </el-col>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: ['title','option','height'],
  mounted() {
    //this.$refs.table.height

    const myChart = echarts.init(this.$refs.chart);
    myChart.setOption(this.option);
    window.addEventListener("resize",()=>myChart.resize())
    
  }
}
</script>
<style  scoped>
.title{
  background-image:url(../assets/title@2x.png);
  background-repeat: no-repeat;
  background-size:cover;
  height: 40px;
}
.title p{
  margin:0 20px;
  text-align:left;
  color: white;
  display: flex;
  align-items: center;
}
</style>