import React from 'react'
import Echarts from 'echarts-for-react'

const Thumbnail = ({ code }) => {
    let option1 = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日'],
            show: false
        },
        grid: {
            left: 0,
            right: 0,
            top: 0, 
            bottom: 0,
            containLabel: false
        },
        yAxis: {
            show: false,
            type: 'value'
        },
        series: [
            {
                name:'邮件营销',
                type:'line',
                data:[120, 132, 101, 134, 90, 230, 210],
                showSymbol: false
            },
            {
                name:'联盟广告',
                type:'line',
                data:[220, 182, 191, 234, 290, 330, 310],
                showSymbol: false
            },
            {
                name:'视频广告',
                type:'line',
                data:[150, 232, 201, 154, 190, 330, 410],
                showSymbol: false
            },
            {
                name:'直接访问',
                type:'line',
                data:[320, 332, 301, 334, 390, 330, 320],
                showSymbol: false
            },
            {
                name:'搜索引擎',
                type:'line',
                data:[820, 932, 901, 934, 1290, 1330, 1320],
                showSymbol: false
            }
        ]
    };
    let option2 = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日'],
            show: false
        },
        grid: {
            left: 0,
            right: 0,
            top: 0, 
            bottom: 0,
            containLabel: false
        },
        yAxis: {
            show: false,
            type: 'value'
        },
        series: [
            {
                name:'邮件营销',
                type:'bar',
                data:[120, 132, 101, 134, 90, 230, 210],
                showSymbol: false,
                silent: true
            },
            {
                name:'联盟广告',
                type:'bar',
                data:[220, 182, 191, 234, 290, 330, 310],
                showSymbol: false,
                silent: true
            },
            {
                name:'视频广告',
                type:'bar',
                data:[150, 232, 201, 154, 190, 330, 410],
                showSymbol: false,
                silent: true
            },
            {
                name:'直接访问',
                type:'bar',
                data:[320, 332, 301, 334, 390, 330, 320],
                showSymbol: false,
                silent: true
            },
            {
                name:'搜索引擎',
                type:'bar',
                data:[820, 932, 901, 934, 1290, 1330, 1320],
                showSymbol: false,
                silent: true
            }
        ]
    };
    let option3 = {
        series : [
            {
                name: '访问来源',
                type: 'pie',
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                silent: true
            }
        ]
    };
    let option4 = {
        xAxis: {
            show: true
        },
        yAxis: {
            show: true
        },
        grid: {
            left: 0,
            right: 0,
            top: 0, 
            bottom: 0,
            containLabel: false
        },
        series: [{
            data: [
                [10.0, 8.04],
                [8.0, 6.95],
                [13.0, 7.58],
                [9.0, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.0, 7.24],
                [4.0, 4.26],
                [12.0, 10.84],
                [7.0, 4.82],
                [5.0, 5.68]
            ],
            type: 'scatter',
            silent: true
        }]
    };
    let option = [option1, option2, option3, option4]
    return (
        <div style={{ width: '100%', height: '100%' }}>
            <Echarts
                key={code}
                option={option[0]}
                className='rc-echarts'
                style={{height: '100%'}}
            />
        </div>
    );
}

export default Thumbnail;