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

var colors = 'rgb(13, 119, 145)';
var fontColor = '#fff'
var lineColor = 'rgba(33, 50, 89,0.8)'



var datalist = [
    {
        name: "天津之眼",
        value: [25, 85],
        symbolSize: 30,
        opacity: 0.6,
    },
    {
        name: "天津之眼",
        value: [100, 305],
        symbolSize: 50,
        opacity: 0.6,
    },
    {
        name: "天津之眼",
        value: [200, 525],
        symbolSize: 70,
        opacity: 0.6,
    },
    {
        name: "天津之眼",
        value: [255, 405],
        symbolSize: 30,
        opacity: 0.6,
    },
    {
        name: "天津之眼",
        value: [500, 705],
        symbolSize: 50,
        opacity: 0.6,
    },
    {
        name: "天津之眼",
        value: [400, 525],
        symbolSize: 70,
        opacity: 0.6,
    },
    {
        name: "天津之眼",
        value: [255, 405],
        symbolSize: 30,
        opacity: 0.6,
    },
    {
        name: "天津之眼",
        value: [700, 805],
        symbolSize: 50,
        opacity: 0.6,
    },
    {
        name: "天津之眼",
        value: [300, 425],
        symbolSize: 70,
        opacity: 0.6,
    },
    {
        name: "天津之眼",
        value: [365, 505],
        symbolSize: 30,
        opacity: 0.6,
    },
    {
        name: "天津之眼",
        value: [600, 705],
        symbolSize: 40,
        opacity: 0.6,
    },
    {
        name: "天津之眼",
        value: [400, 525],
        symbolSize: 70,
        opacity: 0.6,
    },
    {
        name: "天津之眼",
        value: [800, 925],
        symbolSize: 30,
        opacity: 0.6,
    },
    {
        name: "天津之眼",
        value: [900, 985],
        symbolSize: 20,
        opacity: 0.6,
    },

];
var datas = [];
for (var i = 0; i < datalist.length; i++) {
    var item = datalist[i];
    const colorInex = i % colors.length;

    datas.push({
        ...item,
        label: {
            normal: {
                textStyle: {
                    fontSize: 11,
                },
            },
        },
        itemStyle: {
            normal: {
                color: colors,
                opacity: item.opacity,
            },
        },
    });
}



class Chart3 extends Component {

    getOption = () => ({
        grid: {
            show: false,
            right: 15,
            left: 10,
            top: 10,
            bottom: 10,
            containLabel: true
        },
        xAxis: [
            {
                gridIndex: 0,
                type: "value",
                // show: false,
                min: 0,
                max: 1000,
                nameLocation: "middle",
                nameGap: 5,
                axisLabel: {
                    show: true,
                    color: fontColor,
                },
                axisLine: {
                    lineStyle: {
                        color: lineColor,
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: lineColor,
                        width: 0.5,
                    },
                },
            },
        ],
        yAxis: [
            {
                gridIndex: 0,
                min: 0,
                // show: false,
                max: 1000,
                nameLocation: "middle",
                nameGap: 30,
                axisLabel: {
                    show: true,
                    color: fontColor,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor,
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: lineColor,
                        width: 0.5,
                    },
                },
            },

        ],
        series: [
            {
                type: "scatter",
                symbol: "circle",
                symbolSize: 120,
                data: datas,
            },
        ],
    })

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

export default Chart3;