import * as echarts from 'echarts';

export let option1 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    // 图例
    legend: {
        top: '1%',
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
            color: '#fff',
            fontSize: 14
        },
        data: [
            { name: 'A区', itemStyle: { color: '#00bfff' } },
            { name: 'B区', itemStyle: { color: '#00f5a6' } },
            { name: 'C区', itemStyle: { color: '#ffa500' } }
        ]
    },
    // 网格
    grid: {
        left: '3%',
        right: '5%',
        bottom: '5%',
        top: '15%',
        containLabel: true
    },
    // X轴
    xAxis: {
        type: 'category',
        boundaryGap: true,
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#fff',
            fontSize: 12
        },
        data: ['00:00', '06:00', '12:00', '18:00', '24:00']
    },
    // Y轴
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.2)'
            }
        },
        axisLabel: {
            color: '#fff',
            fontSize: 12
        },
        min: 0,
        max: 100,
        interval: 25
    },
    // 系列
    series: [
        {
            name: 'A区',
            type: 'line',
            data: [15, 70, 40, 55, 65, 85, 30, 80, 60],
            lineStyle: {
                color: '#00bfff',
                width: 2
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(0, 191, 255, 0.3)'
                    }, {
                        offset: 1, color: 'rgba(0, 191, 255, 0.0)'
                    }]
                }
            },
            symbol: 'none',
            smooth: true
        },
        {
            name: 'B区',
            type: 'line',
            data: [50, 20, 45, 50, 85, 70, 50, 60, 50],
            lineStyle: {
                color: '#00f5a6',
                width: 2
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(0, 245, 166, 0.3)'
                    }, {
                        offset: 1, color: 'rgba(0, 245, 166, 0.0)'
                    }]
                }
            },
            symbol: 'none',
            smooth: true
        },
        {
            name: 'C区',
            type: 'line',
            data: [20, 50, 30, 35, 30, 35, 30, 35, 30],
            lineStyle: {
                color: '#ffa500',
                width: 2
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(255, 165, 0, 0.3)'
                    }, {
                        offset: 1, color: 'rgba(255, 165, 0, 0.0)'
                    }]
                }
            },
            symbol: 'none',
            smooth: true
        }
    ],
    backgroundColor: 'transparent'
};

export let option2 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    // 图例
    legend: {
        top: '3%',
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
            color: '#fff',
            fontSize: 14
        },
        data: [
            { name: '发电量', itemStyle: { color: 'rgba(125, 255, 253, 1)' } },
            { name: '发电趋势', itemStyle: { color: '#ffa500' } }
        ]
    },
    // 网格
    grid: {
        left: '3%',
        right: '3%',
        bottom: '5%',
        top: '30%',
        containLabel: true
    },
    // X轴
    xAxis: {
        type: 'category',
        boundaryGap: true,
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#fff',
            fontSize: 14
        },
        data: ['周一', '周二', '周三', '周四', '周五']
    },
    // Y轴
    yAxis: {
        type: 'value',
        name: '单位: Kwh',
        nameTextStyle: {
            color: '#fff',
            fontSize: 14
        },
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.3)'
            }
        },
        axisLabel: {
            color: '#fff',
            fontSize: 14
        },
        interval: 1000
    },
    // 系列
    series: [
        {
            name: '发电量',
            type: 'bar',
            data: [2800, 1800, 1200, 1700, 1500],
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(125, 255, 253, 1)'
                    }, {
                        offset: 1, color: 'rgba(225, 255, 255, 0)'
                    }]
                },
                borderRadius: [4, 4, 0, 0]
            },
            barWidth: '30px'
        },
        {
            name: '发电趋势',
            type: 'line',
            data: [1800, 4000, 2500, 4000, 2000],
            lineStyle: {
                color: 'rgba(255, 209, 92, 1)',
                width: 2
            },
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
                color: 'rgba(255, 209, 92, 1)',
                borderColor: '#fff',
                borderWidth: 2
            },
            smooth: false
        }
    ],
    // 背景透明
    backgroundColor: 'transparent'
};

export let option3 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: ['光照度', '功率'],
        top: '1%',
        textStyle: {
            color: '#fff',
            fontSize: 14
        }
    },
    grid: {
        left: '3%',
        right: '5%',
        bottom: '5%',
        top: '15%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: true,
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#fff',
            fontSize: 12
        },
        data: ['00:00', '06:00', '12:00', '18:00', '24:00']
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: '#fff',
            }
        },
        axisLabel: {
            color: '#fff',
            fontSize: 12
        },
        interval: 6,
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
                width: 1,
                type: [4, 3]
            }
        }
    },
    series: [
        {
            name: '光照度',
            type: 'line',
            data: [5.5, 5, 9, 11, 11.5, 12, 11.8, 12, 13],
            itemStyle: {
                color: 'rgba(82, 155, 255, 1)'
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(72, 149, 239, 0.8)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(72, 149, 239, 0.2)'
                    }
                ])
            },
            smooth: true
        },
        {
            name: '功率',
            type: 'line',
            data: [2, 18, 5, 2, 6, 9, 12, 4, 5.5],
            itemStyle: {
                color: 'rgba(125, 255, 253, 1)'
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(152, 230, 205, 0.8)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(152, 230, 205, 0.2)'
                    }
                ])
            },
            smooth: true
        }
    ],
    backgroundColor: 'transparent'
};