v-charts custom tooltip All In One

bug

pie string number bug

https://v-charts.xgqfrms.xyz/#/toggle

solution

自定义 tooltip

1. 保持原始 number 不转换;
2. 使用自定义 tooltip，显示转换后的 number 字符串;

    chartExtend () {
        return {
            ...UtilTableChart.chartExtend('pie'),
            grid: {
                bottom: 0,
            },
            legend: {
                show: false,
            },
            tooltip: {
                formatter: (params) => {
                    const {
                        name,
                        marker,
                        value,
                        percent,
                    } = params;
                    if(this.filterData.metric === 'ins_num') {
                        return `${marker}${name}
${Util.formatTableData(value, this.insNumFormat)}(${percent} %)`;
                    } else {
                        return `${marker}${name}
${value}(${percent} %)`;
                    }
                },
            },
        };
    },

    formatRows (rows = []) {
        return rows.map(obj => {
            const {
                name,
                cost_type,
                cost_amount,
                ins_num,
                _meta: {
                    cost_amount_format,
                    ins_num_format,
                },
            } = obj;
            if(!this.insNumFormat) {
                this.insNumFormat = ins_num_format;
            }
            return {
                name,
                cost_type,
                cost_amount: Util.formatTableData(cost_amount, cost_amount_format),
                // 自定义 tooltip, 修复 number 字符串，饼图无法渲然问题
                ins_num: ins_num,
            };
        });
    },

refs

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！