v-charts tooltip All In One

v-charts tooltip All In One

<template>
  <ve-pie
     :data="chartData"
     :extend="chartExtend"
     :settings="chartSettings"
     :colors="chartColors"
   />
</template>

<script>
  export default {
    data () {
      return {
        chartExtend: {
            tooltip: {
                formatter: (params) => {
                    console.log('params', params);
                    return '✅ 自定义 <mark>tooltip</mark>';
                },
            },
        },
        chartData: {
          columns: ['日期', '访问用户'],
          rows: [
            { '日期': '1/1', '访问用户': 1393 },
            { '日期': '1/2', '访问用户': 3530 },
            { '日期': '1/3', '访问用户': 2923 },
            { '日期': '1/4', '访问用户': 1723 },
            { '日期': '1/5', '访问用户': 3792 },
            { '日期': '1/6', '访问用户': 4593 }
          ]
        },
        chartColors: [
            '#3CADFF',
            '#67C23A',
            '#FFDB43',
            '#FF9356',
        ],
        chartSettings: {
           // 
        },
      }
    }
  }
</script>

demo

API

https://v-charts.xgqfrms.xyz/#/props-demo2

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

refs

https://www.cnblogs.com/xgqfrms/p/15701229.html

https://www.cnblogs.com/xgqfrms/p/15799334.html

---

---

©xgqfrms 2012-2020

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

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

---