main: complex line chart

复杂的折线图

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

JavaScript

new Vue({
  el: '#app',
  created: function () {
    this.chartData = {
        columns: ['日期', '成本', '利润', '占比', '其他'],
        rows: [
          { '日期': '1月1日', '成本': 1523, '利润': 1523, '占比': 0.12, '其他': 100 },
          { '日期': '1月2日', '成本': 1223, '利润': 1523, '占比': 0.345, '其他': 100 },
          { '日期': '1月3日', '成本': 2123, '利润': 1523, '占比': 0.7, '其他': 100 },
          { '日期': '1月4日', '成本': 4123, '利润': 1523, '占比': 0.31, '其他': 100 }
        ]
      }
      this.chartSettings = {
        axisSite: { right: ['占比'] },
        showLine: ['占比'] ,
        yAxisType: ['KMB', 'percent'],
        yAxisName: ['数值', '比率'],
        stack: {
          '占比': ['成本', '利润','其他']
        }
      }
      this.chartExtend = {
      	yAxis (item) {
					item[0].splitLine = {
					  show: false
					}
					return item
				}
      }
  }
})