v-charts pie All In One

v-charts pie All In One

label

tooltips

<template>
  <ve-pie :data="chartData" :settings="chartSettings"></ve-pie>
</template>

<script>
  export default {
    data () {
      // 其他
      this.chartSettings = {
        // limitShowNum: 7,
      };
      return {
        chartData: {
          columns: ['media_src_name', 'cost_amount'],
          rows:[
            {
                "media_src_name": "Google",
                "cost_amount": "1842922494.10"
            },
            {
                "media_src_name": "Facebook",
                "cost_amount": "1051778548.30"
            },
            {
                "media_src_name": "巨量引擎",
                "cost_amount": "1025449104.99"
            },
            {
                "media_src_name": "廣點通",
                "cost_amount": "197694632.36"
            },
            {
                "media_src_name": "Apple",
                "cost_amount": "118538306.15"
            },
            {
                "media_src_name": "Unityads",
                "cost_amount": "79004376.33"
            },
            {
                "media_src_name": "快手廣告",
                "cost_amount": "75649605.63"
            },
            {
                "media_src_name": "其他",
                "cost_amount": "431224102.38"
            }
          ]
        }
      }
    }
  }
</script>

demo

https://codepen.io/xgqfrms/pen/LYzMpGm

refs

餅圖

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

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 發佈文章使用：只允許註冊用戶纔可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

---