<template lang="html">
  <div id="charts">
    <div id="info" :style="{width:'100%',height:'100%'}"></div>
  </div>
</template>

<script>
  import * as Util from '../../Util'
  import co from 'co'
  import echarts from 'echarts'
  import { HttpResetClass } from 'vue-client'

  let getData = function * (self,condition) {
    let load = new HttpResetClass()
    load.load('POST','rs/sql/getAbnormalCount',
      {data:{condition:condition}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let arrparams = []
        let gasdata = []
        for (var i = 0; i < res.data.length; i++) {
          let item = {}
          arrparams[i] = res.data[i].name
          item.name = res.data[i].name
          item.value = res.data[i].abr_value
          gasdata.push(item)
        }
        self.set(arrparams,gasdata)
      })
  }
  export default {
    props: {
      condition: {
        type: String,
        default: '1=1'
      }
    },
    data () {
      title: '业务类型'
      return {
        texttile: '',
        xc: '',
      }
    },
    ready () {
      console.log('进入eacharts界面', this.condition)
    },
    methods: {
      set (arrparams,gasdata) {
        this.xc = echarts.init(document.getElementById('info'))
        this.xc.setOption({
          title : {
            text: '异常信息',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data:arrparams
          },
          series: [

            {
              name:'访问来源',
              type:'pie',
              radius: ['40%', '55%'],
              label: {
                normal: {
                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                  backgroundColor: '#eee',
                  borderColor: '#aaa',
                  borderWidth: 1,
                  borderRadius: 4,
                  rich: {
                    a: {
                      color: '#999',
                      lineHeight: 22,
                      align: 'center'
                    },
                    hr: {
                      borderColor: '#aaa',
                      width: '100%',
                      borderWidth: 0.5,
                      height: 0
                    },
                    b: {
                      fontSize: 16,
                      lineHeight: 33
                    },
                    per: {
                      color: '#eee',
                      backgroundColor: '#334455',
                      padding: [2, 4],
                      borderRadius: 2
                    }
                  }
                }
              },
              data:gasdata
            }
          ]
        })
      },
      searchdata (condition) {
        let getGen =getData(this,condition)
        co(getGen)
      }
    },
    watch: {
      'condition' (val) {
        console.log('ddddddd222', val)
        this.searchdata(val)
      }
    }
  }
</script>
