<div id="app">
  <ve-pie :data="chartData" :settings="chartSettings"></ve-pie>
</div>
new Vue({
  el: '#app',
  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"
            }
          ]
        }
      }
    }
})
View Compiled

External CSS

  1. https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js
  2. https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js
  3. https://cdn.jsdelivr.net/npm/echarts-amap/dist/echarts-amap.min.js
  4. https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js
  5. https://cdn.jsdelivr.net/npm/echarts-liquidfill@2.0.2/dist/echarts-liquidfill.min.js
  6. https://cdn.jsdelivr.net/npm/echarts-wordcloud@1.1.3/dist/echarts-wordcloud.min.js
  7. https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js