var selfechart = require('echarts');
var chartsUtils = {
    //领队绩效
    LeaderPerformance: function(id, xDatas, yDatas, DaydataZoom, callBack) {
        var myChart = selfechart.init(document.getElementById(id));
        myChart.on('click', function(param) {
            if (callBack != undefined) {
                callBack(param.dataIndex);
            }
        });
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                splitLine: {
                    show: false,
                },
            },
            yAxis: {
                type: 'category',
                data: yDatas
            },
            dataZoom: DaydataZoom,
            series: [{
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            //圆角效果（顺时针左上，右上，右下，左下）
                            barBorderRadius: [0, 50, 50, 0],
                            //设置Bar的颜色
                            color: new selfechart.graphic.LinearGradient(
                                0, 0, 1, 0, [
                                    { offset: 0, color: 'rgba(42,174,242,1)' },
                                    { offset: 0.3, color: 'rgba(42,174,242,0.8)' },
                                    { offset: 1, color: 'rgba(42,174,242,0.3)' }
                                ])
                        }
                    },
                    emphasis: {
                        color: new selfechart.graphic.LinearGradient(
                            0, 0, 0, 1, [
                                { offset: 0, color: '#2AAEF2' },
                                { offset: 0.3, color: '#2AAEF2' },
                                { offset: 1, color: '#2AAEF2' }
                            ]
                        )
                    },
                    barWidth: 15,
                    data: xDatas
                },

            ]
        };
        myChart.clear();
        myChart.setOption(option);
    },
    //领队当月走势图
    LeaderCurrentPerformance: function(id, xDatas, yDatas) {
        var myChart2 = selfechart.init(document.getElementById(id));
        var option2 = {
            tooltip: {
                trigger: "axis"
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { show: false, readOnly: false },
                    restore: { show: false },
                    saveAsImage: { show: false }
                }
            },
            calculable: true,
            xAxis: [{
                type: "category",
                data: xDatas
            }],
            yAxis: [{
                type: "value",
                splitLine: {
                    show: false,
                },
            }],
            series: [{
                type: "line",
                smooth: true,
                symbol: "circle",
                data: yDatas,
                itemStyle: {
                    normal: {
                        color: "#2AAEF2",
                        lineStyle: {
                            color: "#2AAEF2"
                        }
                    }
                }
            }, ]
        };

        myChart2.setOption(option2);
    },
    //销售  任务管理  部门执行力
    saleTaskDepartment: function(id, myTitle, myValue, insideColor, outsideColor) {
        var obj=document.getElementById(id);
        if(obj!=null)
        {
            var myChart3 = selfechart.init(obj);
            myChart3.setOption({
                series: [{
                        name: '业务指标',
                        type: 'gauge',
                        detail: {
                            show: true,
                            backgroundColor: 'rgba(0,0,0,0)',
                            borderWidth: 0,
                            borderColor: '#ccc',
                            offsetCenter: [0, '10%'],
                            formatter: '{value}%',
                            textStyle: {
                                color: insideColor, //百分比
                                fontSize: 15
                            }
                        },
                        radius: '90%',
                        startAngle: 200,
                        endAngle: -25,
                        data: [{ value: myValue, name: myTitle }],
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [1, 'transparent']
                                ],
                                width: 2
                            }
                        }, //缩在里面的标线
                        axisTick: {
                            min: 0,
                            max: 100,
                            splitNumber: 3, //缩在里面的标线的宽度
                            length: 2, // //缩在里面的标线的长度
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: insideColor //刻度
                            }
                        },
                        axisLabel: {
                            formatter: function(v) {
                                return "";
                            }
                        },
                        //指针的宽度
                        pointer: {
                            width: 0
                        },
                        title: {
                            show: true,
                            offsetCenter: [0, '40%'],
                            textStyle: {
                                color: '#9E9E9E',
                                fontSize: 14
                            }
                        }
                    },
                    { //空仪表,最外层边框
                        name: '',
                        type: 'gauge',
                        startAngle: 200,
                        endAngle: -25,
                        radius: "100%",
                        //symbol: 'circle',     //设定为实心点
                        //symbolSize: 20,   //设定实心点的大小
                        detail: { formatter: '{value}%' },
                        axisLine: { //仪表圈
                            show: true,
                            lineStyle: {
                                color: [
                                    [myValue / 100, insideColor], //完成度
                                    [1, outsideColor]
                                ],
                                shadowColor: [
                                    [myValue / 100, 'black'],
                                    [1, outsideColor]
                                ],
                                width: 2
                            }
    
                        },
                        splitLine: { //分割线
                            show: false
                        },
                        axisTick: { //刻度线
                            show: false
    
                        },
                        axisLabel: { //刻度标签
                            show: false
                        },
                        pointer: { //指针
                            show: true,
                            width: 5,
                            shadowColor: 'black', //默认透明
                            shadowBlur: 5
                        },
                        detail: {
                            show: false
                        },
                        data: []
                    }
                ]
            })
        }
    },
    saleIndex: function(id, data) {
        var myChart4 = selfechart.init(document.getElementById(id));
        let option = {
            title: {
                text: null
            },
            tooltip: {
                trigger: 'axis'
            },
            radar: {
                name: {
                    rich: {
                        e: {
                            color: '#333333',
                            fontSize: '14'
                        },
                        a: {
                            color: '#00B26F',
                            fontSize: 24,
                            fontWeight: 'bold'
                        },
                        b: {
                            color: '#EB4847',
                            fontSize: 24,
                            fontWeight: 'bold'
                        },
                        c: {
                            color: '#999999',
                            fontSize: 24,
                            fontWeight: 'bold'
                        }
                    },
                    formatter: function(value, indicator) {
                        if (indicator.color === 'S') {
                            return '{e|' + value + '\n}' + '{a|' + indicator.color + '}'
                        } else if (indicator.color === 'A') {
                            return '{e|' + value + '\n}' + '{a|' + indicator.color + '}'
                        } else if (indicator.color === 'B') {
                            return '{e|' + value + '\n}' + '{b|' + indicator.color + '}'
                        } else if (indicator.color === 'C') {
                            return '{e|' + value + '\n}' + '{b|' + indicator.color + '}'
                        } else if (indicator.color === 'D') {
                            return '{e|' + value + '\n}' + '{c|' + indicator.color + '}'
                        }
                    },
                },
                indicator: [
                    { text: data[0].Name, max: 100, color: data[0].color },
                    { text: data[1].Name, max: 100, color: data[1].color },
                    { text: data[2].Name, max: 100, color: data[2].color },
                    { text: data[3].Name, max: 100, color: data[3].color },
                    { text: data[4].Name, max: 100, color: data[4].color }
                ],
                radius: 160,
                center: ['50%', '55%'],
            },
            series: [{
                type: 'radar',
                tooltip: {
                    trigger: 'item'
                },
                itemStyle: {
                	normal:
                	{  
	                    color: "#8ca3e6",
                	}
                },
                data: [{
                    value: [data[0].score, data[1].score, data[2].score, data[3].score, data[4].score],
                    name: '我的评分',
                    areaStyle: {
                        normal: {
                            opacity: 0.35,
                            color: '#1632DE'
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 1,
                            color: '#8ca3e6'
                        }
                    }
                }]
            }]
        };
        myChart4.setOption(option);
    }

};
export default chartsUtils;