line: 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-line :data="chartData" :data-zoom="dataZoom"></ve-line>
</div>

JavaScript

new Vue({
  el: '#app',
  created: function () {
    this.chartData = {
      columns: ['日期', '销售额-1季度', '销售额-2季度', '占比', '其他'],
      rows: [
        { '销售额-1季度': 1523, '日期': '1月1日', '销售额-2季度': 1523, '占比': 0.12, '其他': 100 },
        { '日期': '1月2日', '销售额-1季度': 1223, '销售额-2季度': 1523, '占比': 0.345, '其他': 100 },
      ]
    }
    this.dataZoom = [
    	{
        type: 'slider',
        show: true,
        xAxisIndex: [0],
        start: 0,
        end: 20 // 数值的设置参考http://echarts.baidu.com/option.html#dataZoom-slider.start
      }
    ]
  }
})