# antdv-charts-table

> Echarts table change components for antdv

Latest version **0.0.5-alpha** (published 2023-09-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install antdv-charts-table
pnpm add antdv-charts-table
yarn add antdv-charts-table
bun add antdv-charts-table
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5-alpha |
| Published | 2023-09-18 |
| First published | 2023-01-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 5 MB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | jadegong |
| Maintainers | jadegong |
| Keywords | ant-design-vue, echarts, table |

## Links

- npm: https://www.npmjs.com/package/antdv-charts-table
- Repository: https://github.com/jadegong/antdv-charts-table
- Homepage: https://github.com/jadegong/antdv-charts-table#readme
- Issues: https://github.com/jadegong/antdv-charts-table/issues
- npm.io page: https://npm.io/package/antdv-charts-table

## Dependencies (10)

- [vue](https://npm.io/package/vue.md) ^3.2.45
- [dayjs](https://npm.io/package/dayjs.md) ^1.11.7
- [mockjs](https://npm.io/package/mockjs.md) ^1.1.0
- [echarts](https://npm.io/package/echarts.md) ^5.4.2
- [prismjs](https://npm.io/package/prismjs.md) ^1.29.0
- [vue-router](https://npm.io/package/vue-router.md) ^4.1.6
- [ant-design-vue](https://npm.io/package/ant-design-vue.md) ^3.2.15
- [vue-clipboard3](https://npm.io/package/vue-clipboard3.md) ^2.0.0
- [github-markdown-css](https://npm.io/package/github-markdown-css.md) ^5.1.0
- [@ant-design/icons-vue](https://npm.io/package/@ant-design/icons-vue.md) ^6.1.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.0.5-alpha (latest) — 2023-09-18
- 0.0.4-alpha — 2023-04-12
- 0.0.3-alpha — 2023-03-13
- 0.0.2-alpha — 2023-01-31
- 0.0.1-alpha — 2023-01-19

## README

# antdv-charts-table

## About
Charts and table switch components, you can switch between chart and table.

## Prerequests

echarts > 5.0.0, ant-design-vue for vue 3.

## Project setup

### Install
```
npm i -S antdv-charts-table
```

### Useage
**src/main.ts**
```typescript
import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import AntdvChartsTable from 'antdv-charts-table'
import 'ant-design-vue/dist/antd.css'
import 'antdv-charts-table/dist/style.css'

const app = createApp(App)
app.use(Antd)
app.use(AntdvChartsTable)

app.mount('#app')
```

**For type bar demo**
```vue
<template>
  <div>
    <div style="width: 60%; margin: 0 auto;">
      <act-table-chart :option="barChartOptions"></act-table-chart>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import Mock from 'mockjs';
import { toolUtil } from '../../utils/toolUtils';

export default defineComponent({
  name: 'BarChartPage',
  data() {
    const mockData = Mock.mock({
      'result|12': [{
        'statsDate|+1': 202101,
        'totalCount|7000-9000': 9000,
        'successCount|3000-7000': 7000,
        'sucRate': '50%',
      }]
    });
    // Table columns
    const barColumns = [
      {
        title: '序号',
        width: 70,
        dataIndex: '',
        customRender: (item) => {
          return item.index + 1;
        }
      },
      {
        title: '时间',
        dataIndex: 'statsDate',
      },
      {
        title: '调用总数',
        dataIndex: 'totalCount',
        customRender: (item) => toolUtil.commafy(item.text),
      },
      {
        title: '成功数',
        dataIndex: 'successCount',
        customRender: (item) => toolUtil.commafy(item.text),
      },
      {
        title: '成功率',
        dataIndex: 'sucRate',
        customRender: (item) => `${((item.record.successCount / item.record.totalCount) * 100).toFixed(2)}%`,
      },
    ];
    return {
      barChartOptions: {
        title: '柱状图demo',
        type: 'bar',
        data: mockData.result,
        columns: barColumns,
        toolBar: true,
        keyName: 'statsDate',
        valueName: ['successCount', 'totalCount'],
        name: ['成功数', '总数'],
        barColor: ['#52c41a', '#7687a1'],
        xRotate: 45,
        toolTipFormatter: (params: any) => {
          // console.log(params);
          let res = `时间：${params[0].name}`;
          res += `<br/>${params[0].marker} ${params[0].seriesName}：${toolUtil.commafy(params[0].value)}`;
          res += `<br/>${params[1].marker} ${params[1].seriesName}：${toolUtil.commafy(params[1].value)}`;
          // res += `<br/>失败次数：${toolUtil.commafy(params[0].data.originalData.failCount)}`;
          res += `<br/>成功率：${(params[0].value * 100 / params[1].value).toFixed(2)}%`;
          return res;
        },
        xAxisFormatter: (value: any) => value,
        yAxisName: '数量',
        yAxisFormatter: (value: any) => toolUtil.commafy(value),
        loading: false,
      },
    };
  },
});
</script>
```

### Page view
For type bar and show type chart
![](https://raw.githubusercontent.com/jadegong/antdv-charts-table/master/Screenshot_act_bardemo_chart_2023-01-19_12-20-31.png)
For type bar and switch to table
![](https://raw.githubusercontent.com/jadegong/antdv-charts-table/master/Screenshot_act_bardemo_table_2023-01-19_12-22-31.png)

### Configuration docs
[act.jadegong.cn](http://act.jadegong.cn)

---
_Source: https://npm.io/package/antdv-charts-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._