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,
            };
        });
    },

demo

new Vue({
  el: '#app',
  data () {
    this.chartExtend = {
        // series (v) {
        //   v.forEach(i => {
        //     i.barWidth = 10
        //   })
        //   return v
        // },
        // tooltip (v) {
        //   v.trigger = 'none';
        //   return v
        // },
        // tooltip (obj) {
        //   // console.log('obj', obj);
        //   // 拼接字符串
        //   // const {formatter, trigger} = obj;
        //   return obj;
        // },
        // tooltip: {
        //     formatter: (params) => {
        //        // 一个 column 返回 对象 
        //         const {
        //             name,
        //             marker,
        //             value,
        //             percent,
        //         } = params;
        //         console.log('params', params);
        //         return `${marker}${name}<br/>${value}(${percent} %)`;
        //     },
        // },
        tooltip: {
            formatter: (arr) => {
               // 多个 column 返回 数组
               let result = ``;
               for([i, params] of arr.entries()) {
                  const {
                      name,
                      marker,
                      value,
                  } = params;
                  console.log('params', params, i);
                  if (i === 0) {
                    result += `
                      <span style="color: #0f0;">🚀${name}</span>
                      <br/>
                      ${marker}${value[1]}<br/>
                    `;
                  } else {
                    result += `${marker}${value[1]}<br/>`;
                  }
               }
               return result;
            },
        },
    };
    this.chartSettings = {
      stack: {
          '用户': ['访问用户', '下单用户'],
          // area: true,
      },
      // area: { '用户': ['访问用户', '下单用户'] },
      area: true,
      // ❌ v-charts 不支持，设置 area 与 line 混合图 ？？？https://codepen.io/xgqfrms/pen/MWEdROy?editors=1010
      // ✅ echarts 支持，设置 area 与 line 混合图  https://codepen.io/xgqfrms/pen/MWEMvmY
      // area: false,
      // 柱状图 ？？？showLine: ['下单率'],
      // 双轴 （下单率）
      axisSite: {
        right: ['下单率']
      },
      yAxisType: ['normal', 'percent'],
      // yAxisType: ['KMB', 'percent'],
      // yAxisName: ['数值', '比率']
    };
    return {
      chartData: {
        // 颜色顺序：绿色 / 蓝色 （与 columns 一致）
        // columns: ['日期', '下单用户', '访问用户'],
        // columns: ['日期', '访问用户', '下单用户'],
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 1.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 2423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ],
      },
    };
  }
})

demos

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

v-charts 设置双y轴

https://v-charts.xgqfrms.xyz/#/line?id=设置双y轴

v-charts 条形轴配置双y轴

https://v-charts.xgqfrms.xyz/#/bar?id=条形轴配置双y轴

---

---

©xgqfrms 2012-2021

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

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---