
<script>
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
require('echarts/lib/component/toolbox');
import size from '@/components/base/size';
export default {
    mixins: [size],
    name: 'mychart',
    data () {
        return {
            globalConfig: {
            },
            myConfig:{
                adjustHeight:0,
                adjustWidth:0,
                width:0.5,
                height:0.4,
                onChartClick:null,
                OnUpdataSeries:null,
                myChartStyle:{},
                globalColorFlag:true
            },
            currentData:[],
            mychartconfig:{},
            echarts: require('echarts')
        };
    },
    created () {
        this.init();
    },
    props:{
        config: {
            type:Object,
            default:() => {}
        }
    },
    computed: {
        currentStyle () {
            let style = Object.assign({},this.myConfig.myChartStyle,{});
            style.height = this.currentHeight+'px';
            style.width = this.currentWidth+'px';
            return  style;
        },
        currentMychartConfig () {
            let curlConfig = this._initMychartConfig();
            if(this.myConfig.overrideConfig) {
                curlConfig = this.myConfig.overrideConfig(curlConfig);
            }
            return curlConfig;
        } 
    },
    methods: {
        init () {
            this.myConfig =Object.assign({},this.globalConfig,this.myConfig); 
            this.myConfig =Object.assign({},this.myConfig,this.config);  
            if (this.config.eventObject) {
                Object.assign(this,this.config.eventObject);
                delete this.myConfig.eventObject;
            }
           
            this.mychartconfig = Object.assign({},this.mychartconfig,this.myConfig.mychartconfig);
            this.setSizeConfig(this.myConfig);
            if (this.customInit) {
                this.customInit();
            }
        },
        newMychart(mychartconfig) {
            if (!this.mychart) {
                let dom = this.$refs.mychart;
                if (dom) {
                    this.mychart = this.echarts.init(dom);
                    let self = this;
                    this.mychart.on('click', function (params) {
                        if (params.componentType === 'markPoint') {
                        // 点击到了 markPoint 上
                            if (params.seriesIndex === 5) {
                        // 点击到了 index 为 5 的 series 的 markPoint 上。
                            }
                        }
                        else if (params.componentType === 'series') {
                            if (params.seriesType === 'graph') {
                                if (params.dataType === 'edge') {
                             // 点击到了 graph 的 edge（边）上。
                                }
                                else {
                                // 点击到了 graph 的 node（节点）上。
                                }
                            }
                            if (params.seriesType === 'bar' || params.seriesType === 'line' || params.seriesType === 'pie' || params.seriesType === 'scatter') {
                                if (self.myConfig.onChartClick) {
                                    self.myConfig.onChartClick(params.name, params);
                                }
                            }
                        }
                    });
                    this.mychart.on('dblclick', function (params) {
                        if (params.componentType === 'markPoint') {
                        // 点击到了 markPoint 上
                            if (params.seriesIndex === 5) {
                        // 点击到了 index 为 5 的 series 的 markPoint 上。
                            }
                        }
                        else if (params.componentType === 'series') {
                            if (params.seriesType === 'graph') {
                                if (params.dataType === 'edge') {
                             // 点击到了 graph 的 edge（边）上。
                                }
                                else {
                                // 点击到了 graph 的 node（节点）上。
                                }
                            }
                            if (params.seriesType === 'bar' || params.seriesType === 'line' || params.seriesType === 'pie' || params.seriesType === 'scatter') {
                                if (self.myConfig.onDblChartClick) {
                                    self.myConfig.onDblChartClick(params.name, params);
                                }
                            }
                        }
                    });
                    if (mychartconfig.legend && mychartconfig.legend.type === 'scroll') {
                        this.mychart.on('legendScroll',function (params) {
                            if (self.myConfig.onLegendScroll) {  
                                self.myConfig.onLegendScroll(params, self);
                            }
                        });
                    }
                    if (self.myConfig.customBinding) {
                        self.myConfig.customBinding(self);
                    }
                    window.addEventListener('resize', function () {
                        self.mychart.resize();
                    });
                }
            }
            if (this.mychart) {
                this.mychart.clear();
                if (mychartconfig) {
                    this.mychart.setOption(mychartconfig);
                } 
               
            }
        },
        _initMychartConfig() {
            if (this.customInitMychartConfig) {
                return this.customInitMychartConfig();
            }
        },
        setData(data) {
            this.currentData = this.$Method.copy(data);
        },
        clear() {
            this.currentData = [];
        },
        _getGlobalColor (pro,num) {
            if (this.getGlobalColor) {
                return this.getGlobalColor(pro,num);
            } else {
                let globalColorFlag = true;
                if (this.myConfig.globalColorFlag) {
                    globalColorFlag = this.myConfig.globalColorFlag;
                }
                if (this.config && this.config.globalColorFlag !== undefined) {
                    globalColorFlag = this.config.globalColorFlag;
                }
                if (globalColorFlag) {
                    return this.$Method.getGlobalColor(num, false, pro, this);
                } else {
                    return this.$Method.getGlobalColor(num, true, pro, this);
                }
            }
        },
        setMyConfig(obj) {
            this.myConfig = Object.assign({},this.myConfig,obj);
        }
    },
    mounted () {
    },
    watch:{
        currentMychartConfig: {
            handler(newValue)  {
                this.newMychart(newValue);
            }//,
            //immediate: true
        },
    }
};
</script>


