import { $echarts } from '../../index.js';
import echartstyle from '../../libs/echarts-style.js';

export default ({ dom, param, opt }) => {
    const { $color, $tooltip, $grid } = echartstyle();

    const { data } = param;

    /**
     * 导出配置项
     */
    const option = {
        color: ['rgba(62, 230, 227, 1)', 'rgba(59, 188, 217, 1)', 'rgba(55, 139, 204, 1)', 'rgba(52, 94, 191, 1)'],
        tooltip: {
            show: false,
        },
        series: [
            {
                name: '漏斗图',
                type: 'funnel',
                x: '20%',
                y: 30,
                y2: 30,
                width: '80%',
                min: 0,
                max: 100,
                sort: 'ascending', // 'ascending', 'descending'
                gap: 3,
                data: data,
                label: {
                    normal: {
                        color: 'white',
                        formatter: function (params) {
                            return `{name|${params.name}} {number|${params.value}%}`;
                        },
                        position: 'left',
                        rich: {
                            name: {
                                color: 'rgba(255, 255, 255, 0.6)',
                            },
                            number: {
                                color: 'rgba(52, 236, 255, 1)',
                            },
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        borderWidth: 0,
                        shadowBlur: 30,
                        shadowOffsetX: 0,
                        shadowOffsetY: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                },
            },
        ],
    };

    /**
     * 渲染
     */
    const extensOption = $echarts.extens(opt, option);

    const echarts = $echarts.render(dom, extensOption);
};
