0.2.3 • Published 4 years ago
ccharts v0.2.3
变色龙
核心代码依赖库版本说明
- react 16.8.0+
- size-sensor 1.0.0+
- fast-deep-equal 3.1.1+
- lodash 4.17.15+
- dayjs 1.8.20+
配置说明
图表包含三个核心顶级配置项:data
、config
、chartConfig
。
图表包含二个辅助顶级配置项:loading
、emptyDesc
。
- data(
动态变化
):统一格式的源数据 - loading(
动态变化
):图表loading效果 - emptyDesc(
动态变化
):图表无数据文案配置 - config(
不可变
):涉及到数据配置项,例如设置数据显示哪种类型的图表(柱状、折线等等),变色龙项目单独为用户提供更加方便的 api - chartConfig(
不可变
):图表样式配置项,保持和图表库(echarts、G2、hightcharts)官方文档一致,尽量不要在样式配置项中配置数据项
特殊文件说明
packages/echarts/core.js
:默认图表配置项、提取所有图表共同的方法(例如 tooltip 格式化函数)、引入公共图表库(tooltip
、legend
)packages/echarts/merge.js
:合并配置项使用(config、chartConfig、core 中的默认配置项)
开发注意事项
图表库按需引入
以下主要以 echarts 为例,echarts 细分库查看
项目采用 echarts 按需加载处理,所以每个图表只会引入实现图表相应的库,以柱形图为例子:
// 会单独引入bar相关的库,packages/echarts/components/bar/index.js
import 'echarts/lib/chart/bar'
lib 包发布步骤
- 1、更改 package.json 内部 version 的版本号
- 2、执行
npm run lib:js
- 3、git 代码提交
项目启动相关
# 开发环境
npm run dev
# 文档平台打包,首次需要运行npm run dll
npm run dll
npm run build
# 查看lib包下代码大小分布
npm run analyz
# package核心包打包
npm run lib:js
基本使用
基础柱状图
function BaseDemo() {
const data = [
{
month: 'Jan',
Tokyo: {
value: 7.222,
other: 111,
other2: 222
},
London: 3.9,
beijing: 11.7
},
{ month: 'Feb', Tokyo: 6.9, London: 4.2, beijing: 5.7 },
{ month: 'Mar', Tokyo: 3.4, London: 5.7, beijing: 9.7 },
{ month: 'Mar1', Tokyo: 3.4, London: 5.7, beijing: 6.7 },
{ month: 'Mar2', Tokyo: 3.4, London: 5.7, beijing: 1.7 },
{ month: 'Mar3', Tokyo: 3.4, London: 5.7, beijing: 2.7 }
]
const chartConfig = {}
const config = {
height: 500,
showType: ['bar'],
xAxisType: 'category',
yAxisSite: {
right: ['London']
},
yAxisName: ['左边', '右边'],
zlevel: ['Tokyo', 'London', 'beijing'],
boundaryGap: true,
keyMapping: {
Tokyo: '东京',
London: '伦敦',
beijing: '北京'
},
barWidth: 20,
dataType: ['#.00']
}
const [value] = React.useState(data)
return <ChartBar data={value} config={config} chartConfig={chartConfig} />
}
0.2.3
4 years ago