<template>
  <div  :style="currentStyle" ref="mychart">
  </div>
</template>
<script>
import Base from '@/components/mychart/basechart.vue';
// 引入仪表盘组件
require('echarts/lib/chart/gauge');
export default {
    name: 'gauge',
    extends: Base,
    data () {
        return {
            mychartconfig: {
                title:{
                    text: '',
                    x: '50%',
                    textAlign: 'center'
                },
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                series: []
            },
            myConfig:{
                cfieldname:'',  // 类型字段名
                yfieldname:'',  // 值字段名
                mychartconfig:{}
            }
        };
    },
    methods: {
        customInitMychartConfig () {
            let curlConfig = Object.assign({},this.mychartconfig,this.myConfig.mychartconfig); 
            let tempData = {};
            let legendData = [];
            let self = this;
            let data = [];
            let series = [];
            if (this.currentData && this.currentData.length > 0) {
                let xnum = 100 / (this.currentData.length * 2);
                let sum = 0;
                this.currentData.forEach(el => {
                    sum = sum  + Number(el[this.myConfig.yfieldname]);
                });
                this.currentData.forEach((el,i) => {
                    let tmp = {
                        name:  el[this.myConfig.cfieldname],
                        type: 'gauge'
                    };
                    let num;
                    if (i === 0) {
                        num = xnum * (i + 1);
                    } else {
                        num = xnum * (i + 2);
                    }
                    let center = [];
                    center.push(num + '%');
                    center.push('50%');
                    tmp.center = center;
                    tmp.data = [];
                    let tmpObj = {};
                    tmpObj.name = el[this.myConfig.cfieldname];
                    tmpObj.value = (Number(el[this.myConfig.yfieldname])/sum)*100;
                    tmp.data.push(tmpObj);
                    tmp.radius = '80%';
                    tmp.title = {
                        offsetCenter: [0, '80px']
                    };
                    tmp.detail = {
                        formatter: '{value}%',
                        fontSize: 18
                    };
                    series.push(tmp);
                });
                curlConfig.series = series;
                curlConfig.title.text = '总计：' + sum;
            }
            return curlConfig;
        }
    }
};
</script>