<template>
  <span>{{this.data[0].f_insert_date}}至{{this.data[this.data.length-1].f_insert_date}}</span>
    <button class="button_clear" @click="back()" style="width:80px;margin-left:10px;">返回</button>
  <div id="main" style="width: 1800px;height:800px;"></div>
</template>
<script>
  export default {
    title: '折线图',
    props: ['data'],
    data() {
      return {
        xc: '',
        anzhuang: [],
        c0: [],
        c: [],
        user_bv: [],
        c1: [],
        f_gas_all: [],
        f_gas: [],
        f_gas1: [],
        f_bv1: []
      }
    },
    ready() {
      let aa = []
      let ab = []
      let ad = []
      let ae = []
      let af = []
      let ag = []
      let ah = []
      let aj = []
      let ak = []
      this.data.forEach(function (row) {
        aa.push(row.anzhuang)
        ab.push(row.c0)
        ad.push(row.c)
        ae.push(row.user_bv)
        af.push(row.c1)
        ag.push(row.f_gas_all)
        ah.push(row.f_gas)
        aj.push(row.f_gas1)
        ak.push(row.f_bv1)
      })
      this.anzhuang = aa
      this.c0 = ab
      this.c = ad
      this.user_bv = ae
      this.c1 = af
      this.f_gas_all = ag
      this.f_gas = ah
      this.f_gas1 = aj
      this.f_bv1 = ak
      this.lin()
    },
    methods: {
      back() {
        this.$back()
      },
      lin() {
        this.xc = this.$echarts.init(document.getElementById('main'))
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '抄表分析折线图'
          },
          tooltip: {},
          legend: {
            data: ['安装户数', '停用户数', '在用户数', '用户使用率(%)', '抄表成功户数', '总用气量', '日均户均用气量(成功)', '日均户均用气量(在用)', '抄表成功率(%)']
          },
          xAxis: {
            data: this.data.length
          },
          yAxis: {},
          series: [{
            name: '安装户数',
            type: 'line',
            data: this.anzhuang
          }, {
            name: '停用户数',
            type: 'line',
            data: this.c0
          }, {
            name: '在用户数',
            type: 'line',
            data: this.c
          }, {
            name: '用户使用率(%)',
            type: 'line',
            data: this.user_bv
          }, {
            name: '抄表成功户数',
            type: 'line',
            data: this.c1
          }, {
            name: '总用气量',
            type: 'line',
            data: this.f_gas_all
          }, {
            name: '日均户均用气量(成功)',
            type: 'line',
            data: this.f_gas
          }, {
            name: '日均户均用气量(在用)',
            type: 'line',
            data: this.f_gas1
          }, {
            name: '抄表成功率(%)',
            type: 'line',
            data: this.f_bv1
          }]
        }

        // 使用刚指定的配置项和数据显示图表。
        this.xc.setOption(option);
      }
    }

  }
</script>
<style>

</style>
