基础漏斗图

by vecharts

HTML

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/echarts@v4.9.0/dist/echarts.min.js"></script>
<script src="//unpkg.com/ve-charts@latest/lib/ve-charts.umd.min.js"></script>

<div id="app">
  <div class="charts-content">
    <ve-funnel-chart :data="data" :series="series" />
  </div>
</div>

JavaScript

new Vue({
  data() {
    return {
      data: {
        dimensions: {
          name: '渠道',
          data: ['APP', 'PC', 'M端', '微信', '手Q', '小程序']
        },
        measures: [{
          name: 'PV',
          data: [36000, 30000, 24000, 18000, 12000, 6000]
        }, {
          name: 'UV',
          data: [36000, 30000, 24000, 18000, 12000, 6000]
        }]
      }
    }
  },
  created () {
  	this.series = [
      {
        type: 'funnel',
        width: '40%',
        left: '10%',
        top: '15%',
        label: {
          normal: {
            position: 'left'
          }
        }
      },
      {
        type: 'funnel',
        width: '40%',
        left: '50%',
        top: '15%',
        sort: 'ascending'
      }
    ]
  }
}).$mount('#app')