JSFiddle - React, Tailwind, and code Playground

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

JavaScript

new Vue({
  el: '#app',
  created: function () {
    this.chartData = {
      columns: ['时间', '地点', '人数'],
      rows: [
        { '时间': '星期一', '地点': '北京', '人数': 1000 },
        { '时间': '星期二', '地点': '上海', '人数': 400 },
        { '时间': '星期三', '地点': '杭州', '人数': 800 },
        { '时间': '星期二', '地点': '深圳', '人数': 200 },
        { '时间': '星期三', '地点': '长春', '人数': 100 },
        { '时间': '星期五', '地点': '南京', '人数': 300 },
        { '时间': '星期四', '地点': '江苏', '人数': 800 },
        { '时间': '星期一', '地点': '北京', '人数': 700 },
        { '时间': '星期三', '地点': '上海', '人数': 300 },
        { '时间': '星期二', '地点': '杭州', '人数': 500 }
      ]
    }
    this.chartSettings = {}
    this.extend = {
      tooltip: {
      	trigger: 'axis',
        formatter (v) {
          console.log(v)
          return 'haha {a0}' + v.name
        }
      }
    }
  }
})