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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章