import echarts from 'echarts';
// import { PieChart } from 'echarts/charts';
// import {
//     TitleComponent,
//     TooltipComponent,
//     GridComponent,
//     DatasetComponent,
//     TransformComponent
// } from 'echarts/components';
// import { LabelLayout, UniversalTransition } from 'echarts/features';
// import { CanvasRenderer } from 'echarts/renderers';
// import { LegendComponent } from 'echarts/components';
// echarts.use([
//     TitleComponent,
//     TooltipComponent,
//     GridComponent,
//     DatasetComponent,
//     TransformComponent,
//     PieChart,
//     LabelLayout,
//     UniversalTransition,
//     CanvasRenderer,
//     LegendComponent,
// ]);
function fontSize(res){
	const clientWidth = window.innerWidth || document.documentElement.clientWidth|| document.body.clientWidth;
	if (!clientWidth) return res;
	let fontSize = clientWidth / 1920;
	return res*fontSize;
}

export default function showPie(id, data) {
    if (data && data.seriesData && data.seriesData.length > 0) {
        const list = ['#18CCBA','#0068B7','#18A8F8','#F6B37F','#3DE7F7','#22AC38','#f29a76','#f6b37f','#facd89','#fff799','#cce198','#acd598','#89c997','#84ccc9','#7ecef4','#88abda','#8c97cb'];
        const len = list.length;
        data.seriesData.map((item, index) => {
            item.color = list[index % len];
        });
    }
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)',
            position: 'right',
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            padding: 0,
            left: 0,
            top: 0,
            bottom: 0,
            data: data.legendData,
            itemWidth: 5,
            itemHeight: 5,
            textStyle: {
              color: "#666666",
              fontSize: fontSize(12),
              fontWeight: 400,
            //   width: 70,
            //   overflow: 'truncate',
            },
            formatter: function (name) {
                let s = name;
                if (s.length > 5) {
                    s = s.substr(0, 5) + '...';
                }
                return s;
            },
            pageIconSize: [8, 8],
            pageIconColor: '#3D93FF',
            icon: 'circle',
            itemGap: 6,
        },
        series: [{
            name: '任务数',
            type: 'pie',
            radius: ['50%', '100%'],
            left: '45%',
            top: '10%',
            right: 10,
            bottom: 4,
            hoverOffset: 2,
            data: data.seriesData,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                }
            },
            labelLine: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                }
            },
            itemStyle: {
                normal: {
                    color: function(params) {
                        return params.data.color;
                    }
                }
            },
        }]
    };

    const e = document.getElementById(id);
    let instance = echarts.getInstanceByDom(e);
    if (instance == null) {
        instance = echarts.init(e, null, { devicePixelRatio: (window.devicePixelRatio + 1) });
    }
    instance.setOption(option);
    setTimeout(() => {
        window.onresize = function () {
            instance.resize();
        };
    }, 1200);
}