利用D3与React打造一个属于自己的可视化框架

作者 : 开心源码 本文共568个字,预计阅读时间需要2分钟 发布时间: 2022-05-13 共135人阅读

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

启动

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
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 利用D3与React打造一个属于自己的可视化框架

发表回复