<template>
  <div  :style="currentStyle" ref="mychart">
  </div>
</template>

<script>
import Base from '@/components/mychart/basechart.vue';
// 引入柱状图组件
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
export default {
    name: 'barline',
    extends: Base,
    data () {
        return {
            mychartconfig: {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: []
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: []
                    }
                    
                ],
                yAxis: [
                    {
                        type: 'value'
                    },
                    {
                        type: 'value'
                    }
                ],
                series: []
            },
            myConfig:{
                xfieldname:'', // x轴字段名
                xdata:'',      // x轴数据
                cdata:'',      // 分类数据
                yfieldnamelist:[],   //值字段名数组
                typelist:['bar','line'], // 图形类型
                mychartconfig:{}
            }
        };
    },
    methods: {
        customInitMychartConfig () {
            let curlConfig = Object.assign({},this.mychartconfig,this.myConfig.mychartconfig); 
            let xObj = {};
            let xData = [];
            let legendData = [];
            let self = this;
            let series = [];
            let  barNum = 0;
            let  lineNum = 0;
            if (this.currentData && this.currentData.length > 0) {
                this.currentData.forEach(el => {
                    let xname = el[self.myConfig.xfieldname];
                    if (!xObj[xname]) {
                        xObj[xname] = true;
                        xData.push(xname);
                    }
                });
                 // 处理分类
                if (this.myConfig.cdata && this.myConfig.cdata.length > 0) {
                    legendData = this.$Method.copy(this.myConfig.cdata);
                } 
                // 处理x轴数据
                if (this.myConfig.xdata && this.myConfig.xdata.length > 0) {
                    xData = this.$Method.copy(this.myConfig.xdata);
                } 
                // 处理值
                legendData.forEach((c,z) => {
                    let temp = {
                        name:c,
                        type: this.myConfig.typelist[z],
                        yAxisIndex:z
                    };
                    if (temp.type === 'bar') {
                        barNum++;
                    }
                    if (temp.type === 'line') {
                        lineNum++;
                    }
                    temp.data = [];
                    let xflag = false;
                    let yname = this.myConfig.yfieldnamelist[z];
                    xData.forEach(x => {
                        xflag = false;
                        this.currentData.some(el => {
                            if (el[this.myConfig.xfieldname] === x) {
                                temp.data.push(el[yname]);
                                xflag = true;
                                return true;   
                            }
                        });
                        if (!xflag) {
                            temp.data.push('0');
                        }
                    });
                    if (this.myConfig.OnUpdataSeries) {
                        let that = this;
                        this.myConfig.OnUpdataSeries(temp,that);
                    }
                    series.push(temp);
                });
            }
            // 处理分类
            curlConfig.legend.data = legendData;
            // 处理x轴数据
            curlConfig.xAxis[0].data = xData;
            // 处理数据
            curlConfig.series = series;
            // 处理颜色
            if (!this.mychartconfig.color) {
                let barColor = [];
                let lineColor = [];
                let color = [];
                let bar = 0;
                let line = 0;
                if (barNum > 0) {
                    barColor = this._getGlobalColor('bar', barNum);
                }
                if (lineNum > 0) {
                    lineColor = this._getGlobalColor('line', lineNum);
                }
                this.myConfig.typelist.forEach(el =>{
                    if (el === 'bar') {
                        color.push(barColor[bar]);
                        bar++;
                    }
                    if (el === 'line') {
                        color.push(lineColor[line]);
                        line++;
                    }
                });
                curlConfig.color  = color;
            } 
            return curlConfig;
        }
       
    }
};
</script>