0.2.3 • Published 4 years ago

ccharts v0.2.3

Weekly downloads
-
License
-
Repository
-
Last release
4 years ago

变色龙

核心代码依赖库版本说明

  • react 16.8.0+
  • size-sensor 1.0.0+
  • fast-deep-equal 3.1.1+
  • lodash 4.17.15+
  • dayjs 1.8.20+

配置说明

图表包含三个核心顶级配置项:dataconfigchartConfig 图表包含二个辅助顶级配置项:loadingemptyDesc

  • data(动态变化):统一格式的源数据
  • loading(动态变化):图表loading效果
  • emptyDesc(动态变化):图表无数据文案配置
  • config(不可变):涉及到数据配置项,例如设置数据显示哪种类型的图表(柱状、折线等等),变色龙项目单独为用户提供更加方便的 api
  • chartConfig(不可变):图表样式配置项,保持和图表库(echarts、G2、hightcharts)官方文档一致,尽量不要在样式配置项中配置数据项

特殊文件说明

  • packages/echarts/core.js:默认图表配置项、提取所有图表共同的方法(例如 tooltip 格式化函数)、引入公共图表库(tooltiplegend
  • 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} />
}