import React from 'react'
import ReactEcharts from 'echarts-for-react'
import { useTheme } from '@material-ui/core/styles'
import { Typography } from '@material-ui/core'

const CustomLineChart = ({ data, color }) => {
    //const { textLeft, textRight, data, bg, height } = item
    const option = {
        color: color,
        tooltip: {
            show: true,
        },
        // legend: {
        //     top: '50%',
        //     left: 'center',

        // },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['60%', '80%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 10,
                        fontWeight: 'bold',
                    },
                },
                labelLine: {
                    show: false,
                },
                data: data,
            },
        ],
    }

    return <ReactEcharts style={{ height: 300 }} option={option} />
}

export default CustomLineChart
