patd-chart v1.0.2

基于 PAT Design 规范封装的基于 React 的 Echarts4.0 图表组件库

特性

• 统一的数据格式： 使用对前后端都友好的数据格式，方便生成和修改。
• 简化的配置项： 通过简化的配置项，可以轻松实现复杂需求。
• 定制简单： 提供多种自定义 Echarts 方式，可以方便的设置图表配置项。
• 支持 ts： 源码用 Typescript 编写，同时支持 js 和 ts 加载

安装

yarn add patd-chart

例子

import React from 'react';
import { Pie } from 'patd-chart';

const pieData = {
  dimensions: ['count', 'name'],
  source: [
    { count: 100, name: 'apple' },
    { count: 90, name: 'man' },
    { count: 30, name: 'woman' }
  ]
};
const App: React.FC = () => {
  return (
    <Pie 
       width="420px"
       height="314px"
       name="基础饼图"
       data={ pieData } 
    />
  )
}

data 参数接收 echarts 官网的 dataset 格式。

配置主题

内置orange、blue、green 主题，默认 orange 主题，且提供全局主题配置接口。

import { setTheme } from 'patd-chart';

setTheme('blue');