条形图

by Vue Echarts

HTML

<link rel="stylesheet" href="https://unpkg.com/c3/c3.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/[email protected]/d3.min.js"></script>
  <script src="https://unpkg.com/c3/c3.min.js"></script>
  <script src="https://unpkg.com/v-d3/lib/index.min.js"></script>

  <div id="app">
    <vd-bar :data="chartData" :settings="chartSettings"></vd-bar>
  </div>

JavaScript

new Vue({
  el: '#app',
  data: {
    chartSettings: {}
  },
  created: function () {
    this.chartData = {
      columns: ['日期', '余额', '数值', '比率'],
      rows: [
        { '日期': '1-1', '余额': 123, '数值': 223, '比率': 0.1 },
        { '日期': '1-2', '余额': 1223, '数值': 2223, '比率': 0.2 },
        { '日期': '1-3', '余额': 2123, '数值': 2123, '比率': 0.3 },
        { '日期': '1-4', '余额': 4123, '数值': 2123, '比率': 0.4 },
        { '日期': '1-5', '余额': 3123, '数值': 2123, '比率': 0.5 },
        { '日期': '1-6', '余额': 7123, '数值': 2123, '比率': 0.6 }
      ]
    }
    this.chartSettings = {
      stack: {
        stack1: ['余额', '数值']
      },
      axisSite: {
        top: ['比率']
      },
      xAxisType: ['KMB', 'percent'],
      xAxisName: ['数值', '比率'],
      yAxisName: '日期'
    }
  }
})