funnel: with multi settings

带有settings的漏斗图

by Vue Echarts

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="//unpkg.com/v-charts/lib/index.min.js"></script>

<div id="app">
  <ve-funnel :data="chartData" :settings="chartSettings"></ve-funnel>
</div>

JavaScript

new Vue({
  el: '#app',
  created: function () {
    this.chartData = {
      columns: ['date', 'cost', 'profit', 'growthRate', 'people'],
      rows: [
        { 'date': '01/01', 'cost': 1523, 'profit': 1523, 'growthRate': 0.12, 'people': 100 },
        { 'date': '01/02', 'cost': 1223, 'profit': 1523, 'growthRate': 0.345, 'people': 100 },
        { 'date': '01/03', 'cost': 2123, 'profit': 1523, 'growthRate': 0.7, 'people': 100 },
        { 'date': '01/04', 'cost': 4123, 'profit': 1523, 'growthRate': 0.31, 'people': 100 },
        { 'date': '01/05', 'cost': 3123, 'profit': 1523, 'growthRate': 0.12, 'people': 100 },
        { 'date': '01/06', 'cost': 7123, 'profit': 1523, 'growthRate': 0.65, 'people': 100 }
      ]
    }
    this.chartSettings = {
      dimension: 'date',
      metrics: 'cost',
      dataType: 'KMB',
      sequence: ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06'],
      ascending: false
    }
  }
})