点阵图

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

JavaScript

new Vue({
  el: '#app',
  created: function () {
    this.chartData = {
        columns: ['第一次考试', '第一组', '第二组', '第三组'],
        rows: [
          { '第一次考试': '1-1',  '第三组': 800 },
          { '第一次考试': '1-2', '第一组': 1223, '第三组': 6, '第二组': 2344 },
          { '第一次考试': '1-3', '第一组': 7123, '第三组': 9, '第二组': 3245 },
          { '第一次考试': '1-4', '第一组': 4123, '第三组': 12, '第二组': 4355 },
          { '第一次考试': '1-5', '第一组': 3123, '第三组': 15, '第二组': 4564 },
          { '第一次考试': '1-6', '第一组': 2323, '第三组': 20, '第二组': 6537 }
        ]
      }
    this.chartSettings = {}
   }
})