JSFiddle - React, Tailwind, and code Playground

by Vue Echarts

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" :grid="chartGrid" :visual-map="chartVisualMap" :settings="chartSettings"></ve-scatter>
</div>

JavaScript

new Vue({
  el: '#app',
  created: function () {
    this.chartData = {
      columns: ['date', 'cost', 'number', 'age'],
      rows: {
        'American': [
          { 'date': '1-1', 'cost': 123, 'age': 3, 'number': 1244 },
          { 'date': '1-2', 'cost': 1223, 'age': 6, 'number': 2344 },
          { 'date': '1-3', 'cost': 7123, 'age': 9, 'number': 3245 },
          { 'date': '1-4', 'cost': 4123, 'age': 12, 'number': 4355 },
          { 'date': '1-5', 'cost': 3123, 'age': 15, 'number': 4564 },
          { 'date': '1-6', 'cost': 2323, 'age': 20, 'number': 6537 }
        ]
      }
    }
    this.chartSettings = {}
    this.chartVisualMap = {
      type: 'continuous',
      dimension: 3,
      min: 0,
      max: 30,
      inRange: {
        color: ['#19d4ae', '#5ab1ef']
      },
      bottom: 50
    }
    this.chartGrid = {
      left: 30
    }
   }
})