<template>
    <div id="expiremeters" style="height: 100%;width:100%"></div>

</template>

<script>
import {HttpResetClass } from 'vue-client'

export default {
  name: 'expiremeter',

  ready(){
    this.setBar()
  },
  methods:{
    setBar(){
      let http = new HttpResetClass()
      http.load('post','api/af-revenue/sql/getSellSum',{data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
        // this.year =  (res.data[0].gas_year/10000).toFixed(2)
        // this.day =  (res.data[0].gas_day/10000).toFixed(2)
      })
      this.xc =  this.$echarts.init(document.getElementById('expiremeters'))
      var data = {

        area: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        legend: ['累计到访户数', '实际入户数'],
        data: [
          [120, 362, 201, 334, 320, 330, 110, 220, 200],
          [320, 302, 301, 334, 390, 330, 320, 100, 50],

        ]


      }
      var colors = [ '#6fd9d0',  '#ef9861']

      var option = {
        color: colors,
        legend: {
          top: 22,
          left: 450,
          itemWidth: 10,
          itemHeight: 10,
          // padding: [5, 10],
          textStyle: {
            fontSize: 14,
            color: '#96A4F4',
            padding: [3, 0, 0, 0]
          },
          data: data.legend
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '13%',
          containLabel: true
        },
        xAxis: {
          name :'近12月',
          type: 'category',
          axisLabel: {
            color: '#96A4F4'
          },
          axisLine: {
            lineStyle: {
              color: '#96A4F4'
            },
            width: 5
          },
          axisTick: {
            show: false,
          },
          data: data.area
        },
        yAxis: {
          name:'数量',
          type: 'value',
          axisLabel: {
            color: '#96A4F4'
          },
          axisLine: {
            lineStyle: {
              color: '#96A4F4'
            },
            width: 5
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(150, 164, 244, 0.3)'
            }
          },
        },
        series: [

        ]
      };
      for (var i = 0; i < data.legend.length; i++) {
        option.series.push({
          name: data.legend[i],
          type: 'bar',
          barWidth: '35%',
          label: {
            show: true,
            position: 'insideTop',
            fontSize :8
          },
          data: data.data[i]
        })
      }
      console.log('执行了~~~~~~~~~~~~~~~')
      console.log('执行了~~~~~~~~~~~~~~~',option.series)
      this.xc.setOption(option)
      console.log('这个图表执行啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦')

    }
  },
  data() {
    return {
      xc :''
    }
  }
}
</script>

<style scoped>
.scada-title{
  height: 20%;
}
</style>
