import React from 'react';
import * as echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';

const WgfxJXH = (props: any) => {
    const { data } = props;
    window.console.log(data);
    let option = {
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: 20,
        },
        legend: {
            align: 'left',
            itemGap: 8,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: '#fff',
            },
            data: ['作业里程', '完成率'],
        },
        xAxis: [
            {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
                axisPointer: {
                    type: 'shadow',
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: '#fff',
                },
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '(km)',
                min: 0,
                interval: 100,
                nameTextStyle: {
                    color: '#fff',
                },
                splitNumber: 5,
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: '#fff',
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(151,151,151,0.28)',
                    },
                },
            },
            {
                show: false,
                type: 'value',
                name: '%',
            },
        ],
        series: [
            {
                name: '作业里程',
                type: 'bar',
                barWidth: 18,
                data: [20, 49, 70, 232, 256],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#1677FF',
                        },
                        {
                            offset: 1,
                            color: '#62FDF3',
                        },
                    ]),
                },
            },
            {
                name: '完成率',
                type: 'line',
                yAxisIndex: 1,
                data: [2.0, 2.2, 3.3, 4.5, 6.3],
                itemStyle: {
                    color: '#1AC47C',
                },
            },
        ],
    };

    return (
        <ReactEcharts
            option={option}
            notMerge
            lazyUpdate
            style={{ height: '260px', width: '100%' }}
        />
    );
};

export default WgfxJXH;
