draw-corner-ring

based on data draw corner ring

Usage no npm install needed!

<script type="module">
  import drawCornerRing from 'https://cdn.skypack.dev/draw-corner-ring';
</script>

README

Installation

npm install --save-dev @draw-corner-ring

Usage

  • id: String 绘制区域的id
  • arr: []; 数组类型，传入的原始数据
  • options:
    • radius: 内层圆的半径
    • lng: 最外层圆的半径
    • title: 中间显示标题
    • titleColor: 标题颜色
  • horizon： 水平横线的长度

example

    import drawCircle from './drawCircle.js';
    //id, arr, options, colors, labelColor
    const arr = [
      {
        "name": "学习",
        "value": 6
      },{
        "name": "吃饭",
        "value": 3
      },  {
        "name": "睡觉",
        "value": 8
      },
      {
        "name": "看手机",
        "value": 1
      }
    ];
    const options = {
      radius: 50,
      lng: 80,
      title: 'CPU',
      titleColor: '#73FBFD',
      horizon: 10
    };
    const colors = ["#FFC0CB", "#4B0082", "#40E0D0"]
    drawCircle("circle", arr, options)