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



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


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

function makeseries(data, name, color) {
    if (data) {
        let All = []
        for (let i in data) {
            All.push({
                name: name[i],
                type: 'line',
                showSymbol: false,
                symbol: "circle",
                data: data[i],
                lineStyle: {
                    width: 1,
                    color: color[i]
                },
                itemStyle: {
                    
                    color:  color[i],

                },
            })
        }
        return All;
    }
}



class Chart3 extends Component {


    getOption = () => ({

        title: {
            text: '风机运行频率',
            textStyle: {
                fontSize: 20,
                color: "#52FFF8"
            },
        },

        legend: {
            right: "0%",
            width: "70%",
            height: "14%",
            itemWidth: 17,
            itemHeight: 13.5,
            textStyle: {
                fontSize: 12,
                color: "#F1F1F3",
            },
            // itemStyle: {
            //     color: "rgba(222, 9, 9, 1)"
            //   },
            data: name
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '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: makeseries(this.props.data, name, color)
    })

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

export default Chart3;