let color = ['#f39801', '#01ffff']
let imgSrc = require('@/assets/images/bigdata/qxz/8.png')

function _pie3() {
    let dataArr = [];
    for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 25,
                itemStyle: {
                    normal: {
                        color: "rgb(1,255,255)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 20,
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        }
    }
    return dataArr
}

function funPie(on, off) {
    return {
        color: color,
        graphic: {
            elements: [{
                type: "image",
                z: 3,
                style: {
                    image: imgSrc,
                    width: 45,
                    height: 45
                },
                left: 'center',
                top: "40%",
                position: [100, 100]
            }]
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            type: 'pie',
            zlevel: 4,
            silent: true,
            radius: ['84%', '83%'],
            label: {
                normal: {
                    show: false
                },
            },
            labelLine: {
                normal: {
                    show: false,
                }
            },
            data: _pie3()
        }, {
            type: 'pie',
            roseType: 'radius',
            radius: ['40%', '60%'],
            data: [{
                value: off,
                name: '离线设备'
            }, {
                value: on,
                name: '在线设备'
            }],
            label: {
                normal: {
                    formatter: '{font|{b}}\n{val|{c}台}',
                    lineHeight: 30,
                    rich: {
                        font: {
                            fontSize: 16,
                            color: '#01ffff'
                        },
                        val: {
                            fontSize: 20,
                            color: '#fff'
                        }
                    }
                },
            },
            labelLine: {
                lineStyle: {
                    color: '#01ffff',
                    length: 25,
                    length2: 120,
                    type: 'dashed'
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0,0,0,0.5)'
                }
            }
        }]
    };
}

function hisLine(data) {
    // console.log(data)
    return {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            top: "10",
            icon: 'circle',
            textStyle: {
                color: "#fff",
                fontSize: "12"
            }
        },
        grid: {
            left: "10",
            top: "50",
            right: "20",
            bottom: "10",
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false, //坐标轴两边留白
            data: data[0].time,
            axisLabel: { //坐标轴刻度标签的相关设置。
                // interval: 2, //设置为 1，表示『隔一个标签显示一个标签』
                textStyle: {
                    color: '#69c3f5',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                },
            },
            axisTick: { //坐标轴刻度相关设置。
                show: false,
            },
            axisLine: { //坐标轴轴线相关设置
                lineStyle: {
                    show: false,
                    color: '#0e3461'
                }
            },
        },
        yAxis: [{
            type: 'value',
            splitNumber: 5,
            axisLabel: {
                textStyle: {
                    color: '#69c3f5',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#0e3461',
                    opacity: 0.8
                }
            }

        }],
        series: [{
                name: data[0].tex,
                type: 'line',
                symbol: 'circle',
                itemStyle: {
                    normal: {
                        color: '#fe6c00',
                        borderColor: '#fe6c00',
                        borderWidth: 2,

                        borderType: 'solid'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 0,
                    }
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(171, 120, 31, 1)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(171, 120, 31, 0.5)' // 100% 处的颜色
                        }],
                        global: false, // 缺省为 false
                    },
                },
                data: data[0].val
            },
            {
                name: data[1].tex,
                type: 'line',
                symbol: 'circle',
                itemStyle: {
                    normal: {
                        color: '#01b7f8',
                        borderColor: '#01b7f8',
                        borderWidth: 2,
                        borderType: 'solid'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 0,
                    }
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(61, 196, 241, 1)' // 0% 处的颜色
                        }, {
                            offset: 0.8,
                            color: 'rgba(61, 196, 241, 0.2)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                },
                data: data[1].val
            }
        ]
    };
}
function hisBar(data) {
    return {
        color: ["#2f89cf"],
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: "10",
            top: "10",
            right: "10",
            bottom: "5",
            containLabel: true
        },
        xAxis: [{
            type: "category",
            data: data.time,
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                }
            },
            axisLine: {
                show: false
            }
        }],
        yAxis: [{
            type: "value",
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                }
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                    // width: 1,
                    // type: "solid"
                }
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            }
        }],
        series: [{
            name: data.tex,
            type: "line",
            barWidth: "12",
            data: data.val,
            itemStyle: {
                normal: {
                    barBorderRadius: 30,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#ff2758' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#f87b41' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                },
            },
        }]
    }
}
export {
    funPie,
    hisLine,
    hisBar,
}