# @bj-nsc/basechart

> 基础图表，包括柱图，线图，饼图

Latest version **1.1.6** (published 2020-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bj-nsc/basechart
pnpm add @bj-nsc/basechart
yarn add @bj-nsc/basechart
bun add @bj-nsc/basechart
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2020-06-10 |
| First published | 2020-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 18.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | nsc |
| Maintainers | bjnsc_zrx, wu_han |
| Keywords | webpack, npm, progressbar |

## Links

- npm: https://www.npmjs.com/package/@bj-nsc/basechart
- npm.io page: https://npm.io/package/@bj-nsc/basechart

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.12.0
- [echarts](https://npm.io/package/echarts.md) ^4.7.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.12.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.1.2

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.1.6 (latest) — 2020-06-10
- 1.1.5 — 2020-06-02
- 1.1.4 — 2020-06-02
- 1.1.3 — 2020-06-02
- 1.1.2 — 2020-06-02
- 1.1.1 — 2020-05-28
- 1.1.0 — 2020-05-21
- 1.0.9 — 2020-05-21
- 1.0.8 — 2020-05-21
- 1.0.7 — 2020-05-20
- 1.0.5 — 2020-05-18
- 1.0.4 — 2020-05-14
- 1.0.3 — 2020-05-13
- 1.0.2 — 2020-05-13
- 1.0.1 — 2020-05-13
- … 1 more at https://npm.io/package/@bj-nsc/basechart/versions

## README

# @bj-nsc/basechart

工程进度表，可以查看工程开工竣工时间，总进度和子节点进度等信息

**## 安装和使用**

**npm 安装**

```
npm i "@bj-nsc/basechart
```

**yarn 安装**

```
yarn add "@bj-nsc/basechart
```

在代码里使用

```javascript
import Chart from "@bj-nsc/basechart";

<Chart type={"bar"} cfgData={{ data: [{}], color: [] }} />;
```

**## Props**

属性详细说明:

- `type` 图标类型（bar,line,pie）
- `cfgData` 作图参数
- `option` echart 图表所用 option(传 option 时，type、option、onChartClick 三个属性值有效，其他属性值无效)
- `onChartClick`图表点击函数
- `bigSreen` 是否为大屏样式，默认为 flase
- `convertData` 是否需要对数据进行转换，默认为 true

  - cfgData 对象属性说明(柱线图)：

    - `data` 数据
    - `labelKey` 坐标轴值对应的 key(需要进行数据转换的时候传)
    - `legend` 系列对象(需要进行数据转换的时候传)
    - `isXY` 是否 XY 轴互换，默认为 false
    - `color` 图形颜色数组
    - `showDifferent` 针对 1 个系列的柱图是否不同柱子显示不同颜色，默认 false
    - `legendPosition` 系列显示位置（top,bottom,topcenter,bottomcenter）,默认为 top
    - `lineColor` 坐标轴颜色
    - `textColor` 字体颜色
    - `tipTextColor` 提示字体颜色
    - `tipBackColor` 提示框字体颜色
    - `splintLineColor` 分割线颜色

    data 格式说明

    - 数据需要转换的 data 格式

      ```
      data=[{label:周一,count:1,count1:3},{label:周二,count:3,count1:3},{label:周三,count:4,count1:2}],

      labelKey='label'
      legend=[{name:'数据系列1',type:'bar',key:'count'},{name:'数据系列1',type:'bar',key:'count2'}]
      ```

      legend 说明

      - `name` 系列名称
      - `type` 系列类型（line,bar）
      - `key` 对应 data 数据对象的 key
      - `stack` 是否堆叠 （默认 false）
      - `stackIndex` 堆叠值（stack 为 true 有效）
      - `width` 柱子宽度或者线的宽度

    - 不需要数据转换的 data 格式

          ```
          data={xData:['周一','周二','周三'],yData:[{name:'系列1',data:[1,2,4],type:'bar'},{name:'系列2',data:[3,2,2],type:'bar'}]}
          ```

  - cfgData 对象属性说明(饼图)：

    - `data` 数据
    - `legend` 系列对象(需要进行数据转换的时候传)
    - `color` 图形颜色数组
    - `legendPosition` 系列显示位置（top,bottom,right,left,不传不显示,默认不显示）
    - `lineColor` 坐标轴颜色
    - `textColor` 字体颜色
    - `tipTextColor` 提示字体颜色
    - `tipBackColor` 提示框字体颜色
    - `showtooltip` 是否显示提示
    - `isLoop` 是否为圆环（默认为 false）
    - `label` 图形中心显示的标签
    - `labelSize` 标签字体大小
    - `labelColor` 标签字体颜色
    - `radius` 圆环大小（设置后 isLoop 失效）

    data 格式说明

    - 需要做数据格式转换

    ```
     data= { level1: 34, level2: 64, level3: 100 }
     legend=[
              { name: "等级1", key: "level1" },
              { name: "等级2", key: "level2" },
              { name: "等级3", key: "level3" },
            ]
    ```

    - 不需要做数据格式转换

    ```
    data=[ { name: "等级1", value:1 },
            { name: "等级2", value: 2},
            { name: "等级3", value: 3 }]
    ```

* option 数据格式参考 echarts 官方配置

---
_Source: https://npm.io/package/@bj-nsc/basechart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._