利用D3与React打造一套可视化构建框架
发布于 2 天前 作者 CBDxin 809 次浏览 最后一次编辑是 1 天前 来自 分享

基于D3.js + React 实现的数据可视化构建工具 在线预览地址 http://47.107.66.252:8080/#/

源码地址 https://github.com/CBDxin/chart

启动

npm run start

声明式配置语法

{
  height: 700,
  width: "100%",
  charts:[
    {
      type:"Area",
      name:"区域图",
      key:"Area"
    }
  ],
  components:[
    {
      type:"xAxis",
      position:"bottom"
    },
    {
      type:"yAxis",
      position:"left"
    }
  ],
  dataSet:{
    domain:[1,2,3,4,5,6],
    range:{
      Area:[300,500,400,20,600,900]
    }
  }
}

可视化图表:

  1. Area, Area.png

  2. AreaStack AreaStack.png

  3. Bar Bar.png

  4. BarGroup BarGroup.png

  5. BarStack BarStack.png

  6. Geo Geo.png

  7. Line Line.png

  8. Pie Pie.png

  9. PolarScatter PolarScatter.png

  10. Radar Radar.png

  11. Scatter Scatter.png

  12. TreeMap TreeMap.png

  13. Tree Tree.png

可视化组件:

  1. Scale
  2. Axis
  3. Tooltip
  4. Brush
  5. Grid
  6. Legend
  7. LinearGradient
  8. VisualMap
回到顶部