import * as echarts from 'echarts'
import _ from 'lodash';
export const getOption = (datas) => {
    let max = _.max(datas?.map(data => data.value));
    max = max * 1.2
    const colors = ['#00E9CB', '#E2C334', '#1F68E2', '#747DF8', '#31B9FF', '#44DA84'];
    const richObj = {
        value: {
            color: '#fff',
            fontWeight: 'bold',
            fontSize: 14
        }
    };
    datas.forEach((d, i) => {
        richObj[i] = {
            color: colors[i] || colors[0],
            fontWeight: 'bold',
            fontSize: 14
        }
    })
    const unit = datas?.[0]?.unit || ''
    return {
        tooltip: {

            textStyle: {
                color: '#fff',
            },
            backgroundColor: '#05294D',
            borderColor: '#135469',
            borderWidth: 2,
            show: true,
            formatter: '{b}: <b>{c}</b> ' + unit
        },
        grid: {
            top: '0',
            left: '0',
            bottom: '0',
            textStyle: {
                color: '#fff',
            },

            containLabel: true
        },
        legend: {
            show: true,
            orient: 'vertical',
            right: 0,
            icon: 'circle',
            itemWidth: 10,
            itemHeight: 10,
            top: 'center',
            textStyle: {
                color: '#fff',
                fontSize: 14,
                rich: richObj
            },
            itemGap: 16,
            formatter: function (name) {
                let index = datas.findIndex((item) => item.name === name);
                const item = datas[index];
                const unit = item.unit;
                const valueText = '{' + index + '|' + item.value + '}'
                return `${item.name}  ${valueText}  ${unit}`;
            },
        },
        series: [
            {
                color: colors,
                type: 'pie',
                radius: ['52', '80'],
                data: datas?.map(data => {
                    return {
                        name: data.name,
                        value: data.value
                    }
                }),
                center: ['30%', '50%'],
                label: {
                    show: false
                }
            },
            {
                type: 'pie',
                radius: ['90', '92'],
                color: ['#bed2e04d'],
                data: [max],
                center: ['30%', '50%'],
                label: {
                    show: false
                }
            },
        ]
    };

}