JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <canvas id="mycanvas" width=500 height=400></canvas>
  <div id="display"></div>
</body>

CSS

canvas {
			  border: 1px solid #4c4c4c;
			  border-radius: 10px;
			  box-shadow: 5px 5px rgba(0, 100, 100, .6);
			}
			
			.display {
			  position: absolute;
			  top: 300px;
			  left: 300px;
			  width: 200px;
			  height: 100px;
			  background: #ffcc66;
			  border-radius: 10px;
			  box-shadow: 5px 5px rgba(100, 100, 100, .6);
			  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
			}

JavaScript

$(document).ready(function() {
			  var graph = {};

			  function addEvent(obj, event, fuc) {
			    if (obj.addEventListener) {
			      obj.addEventListener(event, fuc);

			    } else if (obj.attachEvent) {
			      obj.attachEvent("on" + event, function(event) {
			        //使作用域指向obj(事件对象)
			        return fuc.call(obj, event);
			      });
			    }
			  }
			  var Stage = function() {
			    this.canvas = $("#mycanvas");
			    this.width = this.canvas.width();
			    this.height = this.canvas.height();
			    this.canvas = document.getElementById("mycanvas");
			    this.ctx = this.canvas.getContext("2d");
			  };

			  graph["Stage"] = Stage;
			  var Text1 = function(content, x, y, font, color) {
			    content = content || "";
			    x = x || 0;
			    y = y || 0;
			    font = font || "30px serif";
			    color = color || "RGB(0,0,0)";
			    this.stage = new graph.Stage();

			    this.content = content;
			    this.x = x;
			    this.y = y;

			    this.font = font;
			    this.color = color;
			    this.write(this.content);
			  };

			  Text1.prototype.write = function() {
			    //this.content = content;
			    this.stage.ctx.save();
			    this.stage.ctx.font = this.font;
			    this.stage.ctx.StrokeStyle = this.color;
			    this.stage.ctx.fillText(this.content, this.x, this.y);
			    this.stage.ctx.restore();
			  };

			  graph["Text1"] = Text1;

			  var Sector = function(startAngle, endAngle, color, num, rate) {
			    this.startAngle = startAngle;
			    this.endAngle = endAngle;
			    this.color = color;
			    this.num = num;
			    this.rate = rate;
			  };

			  graph["Sector"] = Sector;
			  var Circle = function(data) {
			    data = data || [];

			    this.stage = new graph.Stage;
			    this.ctx = this.stage.ctx;

			    //this.text = new graph.Text1("",400,400,'30px serif',"RGB(0,0,0)");

			    //圆的中点和半径
			    this.x = 200;
			    this.y = 200;
			    this.radius = 100;

			    //将传入的数据送到Circle中作为它的属性
			    this.data =...