<template>
    <div class="member">
        <p class="title">组成成员</p>
        <div class="content">
            <div id="memberEcharts" style="width: 400px;height: 300px;"></div>
            <div class="table">
                <el-scrollbar style="height: 100%">
                    <table border="1">
                        <tr>
                            <th style="width: 130px">类别</th>
                            <th>企业名称</th>
                        </tr>
                        <tr v-for="item of val">
                            <td>{{item.sort}}</td>
                            <td>{{item.name}}</td>
                        </tr>
                    </table>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            val: [
                {
                    name: '银河麒麟',
                    sort: '厂商'
                },
                {
                    name: '华大北斗',
                    sort: '厂商'
                },
                {
                    name: '金蝶',
                    sort: '厂商'
                },
                {
                    name: '长城',
                    sort: '厂商'
                },
                {
                    name: '迈普',
                    sort: '厂商'
                },
                {
                    name: '金蝶',
                    sort: '厂商'
                },
                {
                    name: '长城',
                    sort: '厂商'
                },
                {
                    name: '迈普',
                    sort: '厂商'
                }
            ]
        }
    },
    created() {
    },
    mounted(){
        this.member();
    },
    methods: {
        member() {
            let member = this.$echarts.init(document.getElementById('memberEcharts'));
            let that = this;
            member.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)',
                    extraCssText:'background:#adc5f2;'
                },
                color:['#29abe2','#4877e6','#f57f5a'],
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    y: 'center',
                    itemGap: 30,
                    data: ['测试', '软件开发商', '厂商']
                },
                series: [
                    {
                        name: '组成成员',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        label: {
                            normal: {
                                position: 'inner',
                                show : false
                            }
                        },
                        data: [
                            {value: 7, name: '测试'},
                            {value: 15, name: '软件开发商'},
                            {value: 34, name: '厂商'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        }
    },
    components: {
    },
    watch: {
    }
}
</script>
<style scoped>
    .member{
        margin: 40px 0px 40px 40px;
        height: 240px;
        background: #fff;
        overflow: hidden;
    }
    .member .title{
        padding: 30px 30px 20px 30px;
        font-size: 20px;
        color: #233b6e;
        cursor: default;
    }
    .member #memberEcharts{
        position: relative;
        top: -88px;
        left: -35px;
    }
    .member .content{
        display: flex;
        justify-content: space-around;
    }
    .member table{
        width: 360px;
        margin: 10px;
        border: 1px solid rgba(8,104,157,0.5);
    }
    .member table tr th{
        text-align: center;
        font-size: 18px;
        color: #233b6e;
        background: #f0f5ff;
    }
    .member table tr td{
        text-align: center;
        font-size: 16px;
        color: #666;
        background: #fff;
    }
    .member .table{
        height: 140px;
    }
    .member>>>.el-scrollbar__wrap {
        overflow-x: hidden;
    }
</style>
