// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// // 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/pie';

const Model_echarts = (props) => {<!-- -->
    let [main , setMain] = useState('')
    const handleOk = () => {<!-- -->
        props.dispatch({<!-- --> type: 'CHANGE_MODEL_VISIBLE', payload: [] })
    };
    const option = {<!-- -->
        title: {<!-- -->
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {<!-- -->
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {<!-- -->
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
            {<!-- -->
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {<!-- --> value: 335, name: '直接访问' },
                    {<!-- --> value: 310, name: '邮件营销' },
                    {<!-- --> value: 234, name: '联盟广告' },
                    {<!-- --> value: 135, name: '视频广告' },
                    {<!-- --> value: 1548, name: '搜索引擎' }
                ],
                emphasis: {<!-- -->
                    itemStyle: {<!-- -->
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    useEffect(()=>{<!-- -->
        var node = document.getElementById('main')
        setMain(node)
    } , [])
    // 基于准备好的dom，初始化echarts实例
    if(main !== ""){<!-- -->
        var myChart = echarts.init(main);
        myChart.resize({<!-- --> height: '400px' })
        myChart.setOption(option);
    }
    // 绘制图表
    return (
        <Modal
            title={<!-- -->props.model_payload.title1}
            visible={<!-- -->props.model_visible}
            onCancel = {<!-- -->handleOk}
            width = {<!-- -->800}
            footer = {<!-- --><Button type = {<!-- -->"primary"} onClick = {<!-- -->handleOk}>确定</Button>}
        >
            <div id="main"></div>
        </Modal>
    )
}