v-charts custom tooltip All In One

v-charts custom tooltip All In One

bug

pie string number bug

<template>
  <div>
    <button @click="changeType">切换图表类型</button>
    <ve-chart :data="chartData" :settings="chartSettings"></ve-chart>
  </div>
</template>

<script>
  export default {
    data () {
      this.typeArr = ['pie']
      this.index = 0
      return {
        chartData: {
          columns: ['日期', '访问用户'],
          rows: [
            { '日期': '1月1日', '访问用户': '123,456' },
            { '日期': '1月2日', '访问用户': '666,12' },
            // { '日期': '1月1日', '访问用户': 123.456 },
            // { '日期': '1月2日', '访问用户': 666.12 },
          ]
        },
        chartSettings: { type: this.typeArr[this.index] }
      }
    },
    methods: {
      changeType: function () {
        this.index++
        if (this.index >= this.typeArr.length) { this.index = 0 }
        this.chartSettings = { type: this.typeArr[this.index] }
      }
    }
  }
</script>

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}<br/>${Util.formatTableData(value, this.insNumFormat)}(${percent} %)`;
                    } else {
                        return `${marker}${name}<br/>${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, 禁止转载 🈲️，侵权必究⚠️！

---