基于G2Plot的棒棒糖图

图表解释——棒棒糖图

它是柱状图的变形，采用圆+线进行绘制，圆心的位置代表数据值

DEMO

Live DEMO

Install

npm install --save g2plot-lollipop

Usage

import { Lollipop } from 'g2plot-lollipop'
const data = [
  {
    type: '家具家电',
    sales: 38,
  },
  {
    type: '粮油副食',
    sales: 52,
  },
  {
    type: '生鲜水果',
    sales: 61,
  },
  {
    type: '美容洗护',
    sales: 145,
  },
  {
    type: '母婴用品',
    sales: 48,
  },
  {
    type: '进口食品',
    sales: 38,
  },
  {
    type: '食品饮料',
    sales: 38,
  },
  {
    type: '家庭清洁',
    sales: 38,
  },
];
const lollipop =  new Lollipop('container',  {
    data,
    xField:'type',
    yField: 'sales',
    radiusRatio: 0.4
})
lollipop.render()

API

• diameterRatio(number) 圆直径占比 (0,1)

• 其余API与G2Plot柱状图配置保持一致

Author

👤 MrSmallLiu

• Github: @MrSmallLiu

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2020 MrSmallLiu. This project is MIT licensed.