honeycomb-chart

蜂窝图

Install

npm install --save honeycomb-chart

Usage

import React, { Component } from 'react'
import { HoneycombChart } from 'honeycomb-chart'
import 'honeycomb-chart/dist/index.css'
 
class Example extends Component {
  render() {
    return <HoneycombChart className='honeycomb-chart' option={option} />
  }
}

Option

• margin 图表四周空白区域大小，可以为数字和百分数
  • top
  • left
  • right
  • bottom
• honeycomb 蜂窝配置
  • maxRadius 最大半径
  • minRadius 最小半径
  • distance 蜂窝间距占半径比例，小数表示
• group
  • honeycombNum 每个组每一行蜂窝数目
  • lineGroupNum 图表每一行图表组数
  • titleHeight 标题高度
• series Array 数据
  • name 组名称
  • data 蜂窝数据
    • name 蜂窝名称
    • value 值
    • color 颜色
    • line Array 变化数据
      • time 时间戳
      • value 值

option: {
      margin: {
        top: '5%',
        left: '5%',
        right: '5%',
        bottom: '5%'
      },
      honeycomb: {
        maxRadius: 100,
        minRadius: 10,
        distance: 0.06
      },
      groups: {
        honeycombNum: 10,
        lineGroupNum: 3,
        titleHeight: 20
      },
      series: [
        {
          name: 'count',
          data: [
            {
              name: 'Pass of.',
              value: 1,
              color: '#1C7BDC',
              line: [{
                time: 1589791385130,
                value: 0,
              }, {
                time: 1589791404743,
                value: 1
              }]
            },
            {
              name: 'Whole.',
              value: 1,
              color: '#1C7BDC',
              line: []
            }
          ]
        }
      ]
    }

License

MIT © caohuilin