import React, { Component } from 'react';
import './Chart4.less'
import ReactECharts from 'echarts-for-react';



var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']

import * as echarts from 'echarts';

var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"]
var fontColor = '#fff'
var lineColor = 'rgba(33, 50, 89,0.8)'





class Chart3 extends Component {


    getOption = () => ({
       
     
       
        legend: {
            right: "0%",
            width: "70%",
            height: "14%",
            itemWidth: 17,
            itemHeight: 13.5,
            textStyle: {
                fontSize: 12,
                color: "#F1F1F3",
            },
          
            data: name
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%', 
            top:'3%',
            containLabel: true,
        },

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'],
            axisLabel: {
                show: true,
                color: fontColor,
            },
            axisLine: {
                lineStyle: {
                    color: lineColor,
                },
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                color: fontColor,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: lineColor,
                },
            },
            splitLine: {
                lineStyle: {
                    color: lineColor,
                },
            },
        },
        series: {

            name:'发电量',
            type: 'line',
            showSymbol: true,
            symbol: "circle",
            symbolSize:8,
            symbolBorder:"rgba(17, 36, 246,0.1)",
            data: [200,320,121,125,585,213,521,326,542,258,632,145,258,632,145],
            lineStyle: {
                width: 1,
                color:"rgba(246, 23, 106,0.9)",
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(246, 23, 106,0.3)' },
                    { offset: 0.5, color: 'rgba(246, 23, 106,0.2)' },
                    { offset: 1, color: 'rgba(246, 23, 106,0.1)' }
                ]),
            },
            itemStyle: {
                borderColor: '#F6176A',
                color: "rgba(4, 20, 36,0.8)",
            },

        }
    })

    render() {
        return (
            <div className='ButtonChart4itemDetailBorder'>
                <ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
            </div >
        );
    }
}

export default Chart3;