介绍

UyunCharts 是基于Recharts做的一层封装, 底层是采用React和D3重新定义的一套图表方案.

这套工具能够帮助您在 React 项目中快速方便地进行各类图表的开发. 目前已经支持图表包括: 折线图、柱状图、散点图、扇形图、饼图、雷达图、面积图、树图等, 因为底层采用特别原生技术实现, 所在在兼容性和拓扑性上可以很方便进行其他图表的支持和添加.

设计的三个主要原则.

Simply deploy with React components
Native SVG support, lightweight depending only on some D3 submodules
Declarative components, components of charts are purely presentational

本地开发

$ git clone  git@git.uyunsoft.cn:everest/uyun-charts.git
$ cd uyun-charts
$ npm install
$ npm run demo    //开发调试
$ npm run build   //打包

样例

const data = [
  { name: 'Page A', uv: 1000, pv: 2400, amt: 2400, uvError: [75, 20] },
  { name: 'Page B', uv: 300, pv: 4567, amt: 2400, uvError: [90, 40] },
  { name: 'Page C', uv: 280, pv: 1398, amt: 2400, uvError: 40 },
  { name: 'Page D', uv: 200, pv: 9800, amt: 2400, uvError: 20 },
]
<LineChart
  width={400}
  height={400}
  data={data}
  margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
>
  <XAxis dataKey="name" />
  <Tooltip />
  <CartesianGrid stroke="#f5f5f5" />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
  <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
</LineChart>

使用手册 API

换肤主题

图表默认已经支持蓝/白两套主题，且会跟随项目自动切换, 也可以通过**setTheme("blue/white")**来进行手动切换.

自定义主题配置:

const whiteTheme = {
  background: "#FFFFFF",
  colors: [
    "#3883F8",
    "#3CD768",
    "#FFCD3D",
    "#FF8C3D",
    "#FF4848",
    "#2EDDBD",
    "#722ED1",
    "#EB2F96",
    "#B8BEC8",
    "#D3D9E2",
    "#FFA099",
    "#FFC38F",
    "#FFEA8F",
    "#75D3FF",
    "#B37FEB",
    "#FF85C0"
  ],
  grid: {
    background: "#FFFFFF",
    stroke: "#E6EAEF",
    strokeWidth: 1,
    strokeDasharray: "0",
    strokeOpacity: 1
  },
  axis: {
    label: "#5C6268",
    stroke: "#D3D9E2",
    strokeWidth: 1,
    strokeDasharray: "0",
    strokeOpacity: 1,
    tick: "#D3D9E2"
  },
  legend: {
    label: "#5C6268"
  },
  tooltip: {
    opacity: 0.95,
    background: "#FFFFFF",
    stroke: "#D3D9E2",
    fill: "#D3D9E2",
    label: "#303336"
  }
};

setTheme(themeObj);

主题字段说明

属性	说明	类型
background	背景色	string
colors	数据'按序'对应色	array
grid	网格	object
axis	坐标	object
tooltip	提示框	object
legend	图例	object

网格 grid

属性	说明	类型
background	背景色	string
stroke	网格线颜色	string
strokeWidth	网格线宽	string
strokeDasharray	网格虚线	string
strokeOpacity	网格线透明度	string

坐标 axis

属性	说明	类型
label	轴标签色	string
stroke	轴颜色	string
strokeWidth	轴宽度	string
strokeDasharray	轴虚线	string
strokeOpacity	轴透明度	string
tick	刻度线颜色	string

图例说明 legend

属性	说明	类型
label	图例标签色	string

提示 tooltip

属性	说明	类型
background	背景色	string
opacity	透明度	string
label	字体颜色	string
stroke	指示线颜色	string
fill	指示背景色(柱状图)	string

按需加载

babel-plugin-recharts A simple transform to cherry-pick Recharts modules so you don’t have to.

介绍

UyunCharts 是基于Recharts做的一层封装, 底层是采用React和D3重新定义的一套图表方案.

设计的三个主要原则.

本地开发

样例

使用手册 API

换肤主题

自定义主题配置:

主题字段说明

网格 grid

坐标 axis

图例说明 legend

提示 tooltip

按需加载

License

Current Tags

13 Versions