deep-viz

Deep-Viz of React

A React component library, provide concise and beautiful diversity charts with Canvas, SVG, E-map, WebGL, Dom, based on data visualization experience and commercial data display practice. https://ludejun.github.io/deepviz/

主要专注于数据可视化，提供统一、简洁、漂亮、多样图表并糅合数据可视化经验、商业数据展示惯例的React组件库

1.特性

2.支持环境

3.组件范围

4.安装使用

5.如何贡献

6.感谢

7.展示网站技术栈介绍

特性

• 提供丰富数据可视化组件，基础图表、电子地图、3D制图等，能满足绝大部分可视化需求

• 组件配置简洁化，很少的代码即可画出复杂、统一、漂亮图表；同时可通过特殊配置兼容90%其他需求

• 糅合多年数据可视化经验、商业数据展示惯例，将不必要的配置去掉

• 高质量React组件库，ES2015编写，PropsType完善，严格Eslint规则，统一设计规范

• 支持npm + webpack安装使用

支持环境

• 现代浏览器和 IE9 及以上

• 大部分组件在支持Canvas的浏览器上即可使用

组件范围

• Basic/Echarts 基础图表组件

• Map 地图组件

• Pictogram/Dom 象形图组件

• SVG 组件

• Canvas 组件

• WebGL/3D 组件

  参考示例网站：https://ludejun.github.io/deepviz/

安装使用

推荐使用npm安装使用

npm install deep-viz --save

👇为一个简单LineChart例子，详情可见https://ludejun.github.io/deepviz/#/main/components/basic/line-chart

import { LineChart } from 'deep-viz';

const config = {
  x: { data: lineData.date },
  y: [{data: [lineData.y1, lineData.y2], legend: ['legend1', 'legend2'], name: 'yAxisName/unit'}]
}

ReactDOM.render(
<LineChart config={ config }/>
, mountNode);

按需加载组件：

import LineChart from 'deep-viz/Echarts/LineChart';

如何贡献

第一版开发人员主要基于大数据前端开发和设计小组，感谢他们卓有成效的付出。在3D及2D组件方面还有不少提升空间，也希望得到大家的帮助。

如您希望参与贡献，欢迎 Pull Request，或给我们 报告 Bug。

感谢

秉持不重复造轮子的初衷，组件库开发过程中，大量使用或借鉴其他开源社区图表方案，这里一并表示感谢。有些组件想了解更深入，也可以去相应源头去了解。

• Echarts
• Baidu Map Javascript API
• Three
• Heatmap
• Gaode Map Javascript API
• Echarts-X
• Anime

展示网站技术栈介绍

展示网站技术栈主要为 React + dva + Ant-Design，对此中使用的开源产品一并表示深深的感谢，希望本组件库能像这些产品一样大大提高前端开发效率。

dva是一个基于 react 和 redux、sagas、roadhog 的轻量应用框架，概念来自 elm， 支持 side effects、热替换、动态加载、react-native、SSR 等，已在生产环境广泛应用。

Ant-Design是蚂蚁金服出品的一套丰富 React UI 组件库，适合开发和服务于企业级后台产品。