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, 禁止轉載 🈲️，侵權必究⚠️！

---