JSFiddle - React, Tailwind, and code Playground

by Bandon

HTML

<html>
<head>
    <script src="//g.alicdn.com/bizcharts/io-asserts/3.1.2/react16.0.0.production.min.js"></script>
    <script src="//g.alicdn.com/bizcharts/io-asserts/3.1.2/react-dom16.0.0.production.min.js"></script>
    <script src="//cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
    <script src="//g.alicdn.com/bizcharts/io-asserts/3.1.5/BizCharts.min.js"> </script>
    <script src="https://unpkg.com/[email protected]/umd/bizcharts-plugin-slider.js"> </script>
    <script type="text/javascript" src="//gw.alipayobjects.com/os/antv/assets/data-set/0.8.6/data-set.min.js"></script>
    <script type="text/javascript" src="//gw.alipayobjects.com/as/g/datavis/assets/1.0.1/jquery-3.2.1.min.js"></script>
    

  </head>
  <body>
      <div id="mountNode"><div><div><div style="position:relative;"><canvas id="canvas_1" width="1240" height="1100" style="width: 620px; height: 550px;"></canvas><div class="g2-tooltip" style="position: absolute; visibility: hidden; white-space: nowrap; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(0, 0, 0, 0.65); border-radius: 4px; color: rgb(255, 255, 255); font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Helvetica, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, SimSun, sans-serif; line-height: 20px; padding: 10px 10px 6px;"><div class="g2-tooltip-title"></div><ul class="g2-tooltip-list"></ul></div></div></div></div></div>
      <script type="text/babel">
        const { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape, Facet } = window.BizCharts;
        const data = [
          {type: '分类一', value: 20},
          {type: '分类二', value: 18},
          {type: '分类三', value: 32},
          {type: '分类四', value: 15},
          {type: 'Other', value: 15}
       ...