JSFiddle - React, Tailwind, and code Playground

by Vue Echarts

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-amap/dist/echarts-amap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <el-row>
    <el-row class="a">
      <ve-line :data="chartData"></ve-line>
      <ve-map :data="chartData" :settings="chartSettings"></ve-map>
    </el-row>
  </el-row>
</div>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
.a {
  display: flex;
}
.ve-line,
.ve-map {
  flex: 1;
}

Babel + JSX

new Vue({
  el: '#app',
  data () {
  	this.chartSettings = {
        position: 'china',
        dimension: '位置',
        metrics: ['人口', '面积'],
        dataType: {
          '面积': 'KMB'
        }
      }
    return {
      chartData: {
        columns: ['位置', '税收', '人口', '面积'],
        rows: [
          { '位置': '吉林', '税收': 123, '人口': 123, '面积': 92134 },
          { '位置': '北京', '税收': 1223, '人口': 2123, '面积': 29234 },
          { '位置': '上海', '税收': 2123, '人口': 1243, '面积': 94234 },
          { '位置': '浙江', '税收': 4123, '人口': 5123, '面积': 29234 }
        ]
      }
    }
  }
})