<template>
    <widget-card ref="container">
        <div style="width:100%;min-height:50px;" :loading="loading">
            <div style="margin-bottom:5px;display:flex;align-content:center;justify-content: space-between;">
                <div class="title">需求侧新增数据统计</div>
                <el-radio-group v-model="recentDays" size="mini" @change="getData">
                    <el-radio-button label="0">周</el-radio-button>
                    <el-radio-button label="1">月</el-radio-button>
                    <el-radio-button label="2">年</el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <div id="demand" style="width:800px;height:400px"></div>
    </widget-card>
</template>
<script>
import WidgetCard from './WidgetCard';
import * as echarts from 'echarts';
export default {
    data() {
        return {
            myChart: null,
            loading: false,
            recentDays: '2'
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            this.$http.post('/statistic/getDemand', { type: this.recentDays }).then(res => {
                console.log(res);
                this.loading = true;
                var chartDom = document.getElementById('demand');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                formatter: '{name|{b}}\n{conut|{c}}',
                                lineHeight: 15,
                                rich: {
                                    conut: {
                                        fontSize: 12,
                                        marginRight: 10,
                                        align: 'center',
                                        color: 'rgba(0, 0, 0, 0.5)'
                                    },
                                    name: {
                                        color: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            },
                            data: [
                                // { value: res.DECLASSIFICATION, name: '脱密专利' },
                                { value: res.GENERAL, name: '专利' },
                                { value: res.LOGO, name: '商标' },
                                { value: res.COPY, name: '版权' },
                                { value: res.SOFT, name: '软著' },
                                { value: res.TECHNOLOGY, name: '技术' },
                                { value: res.PRODUCT, name: '产品' }
                                // { value: res.SERVICE, name: '服务' },
                                // { value: res.FUNDING, name: '资金' }
                            ],
                            color: [
                                // '#EE6767',
                                '#73A0FA',
                                '#73DEB3',
                                '#3BA271',
                                '#9B60B4',
                                '#7585A2',
                                '#F7C739'
                                // '#FF9246',
                                // '#C985FF'
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                label: {
                                    show: true,
                                    rich: {
                                        name: {
                                            fontSize: '18',
                                            fontWeight: 'bold'
                                        },
                                        conut: {
                                            fontSize: '18',
                                            lineHeight: '30',
                                            fontWeight: 'bold'
                                        }
                                    }
                                }
                            }
                        }
                    ]
                };
                option && myChart.setOption(option);
            });
        }
    },
    components: {
        WidgetCard
    }
};
</script>
<style lang="less" scoped>
.title {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    line-height: 28px;
}
</style>
