<template>
  <div class="home-chart" style="width:100%;height:100%;">
    <mt-header class="home-header" style="background:white;">
      <a @click="doBack()" slot="left" style="color:#666666;">
        <mt-button icon="back"></mt-button>
      </a>
    </mt-header>
    <div 
      id="myChart" 
      ref="myChart" 
      style="border-top:1px solid #eee;width:100%; height:calc(100% - 40px);background:white;"></div>
  </div>
</template>

<script>
export default {
  name: "chart",
  inject: ["reload"],
  mounted() {
    this.getChart();
  },
  watch: {
    chartData() {
      this.drawLine();
    },
  },
  data() {
    return{
      chartData:'',
    }
  },
  methods: {
    doBack() {
      this.$router.go(-1)
    },
    getChart() {
      this.$api.getChart(this.$route.query.actionContent, {
        onSucess: response => { 
          this.chartData = JSON.parse(response.data.data.result);
        }
      })
    },
    drawLine(){
      let myChart = this.$echarts.init(this.$refs.myChart);
      myChart.setOption(this.chartData);
    },
  }
};
</script>