import React, { Component } from 'react'
import { Card, Col, Row } from 'antd'
import * as echarts from 'echarts'

const echartsColors = [
    { from: '#14dbff', to: '#007dff' },
    { from: '#45f4a6', to: '#3bb27d' },
    { from: '#fbb456', to: '#f1961b' },
    { from: '#fa7148', to: '#ef5932' },
]

function itemColor(index) {
    return {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
            {
                offset: 0,
                color: echartsColors[index % echartsColors.length].from,
            },
            {
                offset: 1,
                color: echartsColors[index % echartsColors.length].to,
            },
        ],
    }
}

function initChart1(dom) {
    const chart = echarts.init(dom);
    chart.setOption({
        legend: {
            top: 'bottom',
        },
        tooltip: {
            formatter: '<b>{b}</b> : {c}幢 ({d}%)',
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                restore: { show: true },
                saveAsImage: { show: true },
            },
        },
        series: [
            {
                name: '面积模式',
                type: 'pie',
                radius: [50, 150],
                startAngle: 110,
                center: ['50%', '50%'],
                roseType: 'area',
                label: {
                    formatter: '{d}',
                },
                data: [
                    {
                        value: 70,
                        name: 'A级',
                        itemStyle: {
                            color: itemColor(0),
                        },
                    },
                    {
                        value: 38,
                        name: 'B级',
                        itemStyle: {
                            color: itemColor(1),
                        },
                    },
                    {
                        value: 32,
                        name: 'C级',
                        itemStyle: {
                            color: itemColor(2),
                        },
                    },
                    {
                        value: 30,
                        name: 'D级',
                        itemStyle: {
                            color: itemColor(3),
                        },
                    },
                ],
            },
        ],
    });
}

function initChart2(dom) {
    const chart = echarts.init(dom);
    chart.setOption({
        tooltip: {
            formatter: '<b>{b}</b> : {c}幢',
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                restore: { show: true },
                saveAsImage: { show: true },
            },
        },
        xAxis: {
            type: 'category',
            data: ['A级', 'B级', 'C级', 'D级'],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                barWidth: 20,
                itemStyle: {
                    color: itemColor(0),
                    borderRadius: 10,
                },
                data: [120, 200, 150, 80],
                type: 'bar',
            },
        ],
    });
}

function initChart3(dom) {
    const chart = echarts.init(dom);
    chart.setOption({
        tooltip: {
            formatter: '<b>{b}</b> : {c}幢',
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                restore: { show: true },
                saveAsImage: { show: true },
            },
        },
        xAxis: {
            type: 'category',
            data: ['A级', 'B级', 'C级', 'D级'],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: [820, 932, 800, 900],
                showSymbol: false,
                lineStyle: {
                    width: 5,
                    shadowBlur: 5,
                    shadowOffsetY: 3,
                    shadowColor: echartsColors[0].from,
                    opacity: 0.5,
                    cap: 'round',
                },
                itemStyle: {
                    color: itemColor(0),
                },
                type: 'line',
                smooth: true,
            },
        ],
    });
}

export default class charts extends Component {

    componentDidMount() {
        initChart1(this.refs['chart-1'])
        initChart2(this.refs['chart-2'])
        initChart3(this.refs['chart-3'])
    }

    render() {
        return (
            <>
                <Row gutter={16}>
                    <Col span={8}>
                        <Card bordered={false} type="inner">
                            <div style={{ height: '400px' }} ref="chart-1"></div>
                        </Card>
                    </Col>
                    <Col span={16}>
                        <Card bordered={false} type="inner">
                            <div style={{ height: '400px' }} ref="chart-2"></div>
                        </Card>
                    </Col>
                </Row>
                <Card bordered={false} type="inner">
                    <div style={{ height: '400px' }} ref="chart-3"></div>
                </Card>
            </>
        )
    }
}
