<template>
  <div id='chart_1{{sid}}' ></div>
</template>

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

  let load = new HttpResetClass()
  let getData = function * (self) {
    load.load('POST', self.sql,
      {data: self.condition},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let model = []
        for (var i = 0; i < res.data.length; i++) {
          let item = {}
          item.name = res.data[i].name
          item.value = res.data[i].value
          model.push(item)
        }
        self.set(model)
      })
  }
    export default {
      data() {
        return {
          sid: new  Date().getSeconds()
        }
      },
      props: {
        sql: String,
        condition: {
          type: Object,
          default: '1=1'
        }
      },
      ready(){
        this.getdata()
      },
      watch:{
        'condition'(val){
          this.getdata()
        }
      },
      methods: {
        getdata(){
          co(getData(this))
        },
        set(model){
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('chart_1'+this.sid))
          var option = {
            backgroundColor: '#eee',
            title : {
              // text: this.model.title,
              // x:'center',
              // top: '30px'
            },
            series : [
              {
                //name: '访问来源',
                type: 'pie',
                radius : '55%',
                //center: ['50%', '50%'],
                // roseType: 'radius',
                label: {
                  show: true,
                  position: 'outside',
                  formatter: '{b}\n{d}%',
                },
                data: model,
                itemStyle: {
                  emphasis: {
                    shadowBlur: 150,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.2)'
                  }
                }
              }
            ]
          };
          // 绘制图表
          myChart.setOption(option);
        }
      }
    }
</script>

<style scoped>

</style>
