pie: with multi settings

带有settings的饼图

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-pie :data="chartData" :grid="grid" :settings="chartSettings" :extend="chartExtend"></ve-pie>
</div>

CSS

.ve-pie {
  border: 1px solid red;
}

JavaScript

new Vue({
  el: '#app',
  created: function () {
    this.chartData = {
      columns: ['日期', '销售额-1季度', '销售额-2季度', '占比', '其他'],
      rows: [
        { '日期': '1月1日', '销售额-1季度': 1523, '销售额-2季度': 1523, '占比': 0.12, '其他': 100 },
        { '日期': '1月2日', '销售额-1季度': 1223, '销售额-2季度': 1523, '占比': 0.345, '其他': 100 },
        { '日期': '1月3日', '销售额-1季度': 2123, '销售额-2季度': 1523, '占比': 0.7, '其他': 100 },
        { '日期': '1月4日', '销售额-1季度': 4123, '销售额-2季度': 1523, '占比': 0.31, '其他': 100 },
        { '日期': '1月5日', '销售额-1季度': 3123, '销售额-2季度': 1523, '占比': 0.12, '其他': 100 },
        { '日期': '1月61日', '销售额-1季度': 7123, '销售额-2季度': 1523, '占比': 0.65, '其他': 100 }
      ]
    }
    this.chartSettings = {
            radius: 10000,
            center:10000,
    grid : {
        //left: '1110px',
        right: 1110,
        show:true,
        top: 1101111,
        bottom: 111111110,
        width: '100%',
        htight: '100%'
    }
    }
    
    this.grid = {
        left: 1110,
        right: 110,
        top: 110,
        center:1001110,
        bottom: 111110,
        width: '100%',
        htight: '100%'
    }
    this.chartExtend = {
      series: {
        radius: '100%',
         grid : {
        left: '1110px',
        right: 1110,
        top: 1101,
        bottom: 111110,
        width: '100%',
        htight: '100%'
    }
      },
       grid : {
        left: '1110px',
        right: 1110,
        top: 1101,
        bottom: 111110,
        width: '100%',
        htight: '100%'
    }
    }
  }
})