# techarts

> An out of the box Taro component for ECharts

Latest version **1.0.6** (published 2022-02-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install techarts
pnpm add techarts
yarn add techarts
bun add techarts
```

## 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.0.6 |
| Published | 2022-02-13 |
| First published | 2020-04-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 64 |
| Author | elvinzhu |
| Maintainers | elvinzhu |
| Keywords | taro, echarts, techarts, 图表 |

## Links

- npm: https://www.npmjs.com/package/techarts
- Repository: https://github.com/elvinzhu/techarts
- Homepage: https://github.com/elvinzhu/techarts#readme
- Issues: https://github.com/elvinzhu/techarts/issues
- npm.io page: https://npm.io/package/techarts

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2022-02-13
- 3.0.7 — 2022-02-13
- 3.0.6 — 2022-02-11
- 3.0.5 — 2022-02-11
- 3.0.4 — 2020-08-14
- 1.0.5 — 2020-08-13
- 1.0.4 — 2020-08-13
- 3.0.3 — 2020-08-13
- 3.0.1 — 2020-08-12
- 3.0.0 — 2020-08-12
- 1.0.3 — 2020-07-03
- 1.0.2 — 2020-06-11
- 1.0.1 — 2020-04-24
- 1.0.0 — 2020-04-23

## README

# techarts

开箱即用的 Taro2 echarts 组件，不需要配置任何 "copy". 据有以下特性：

- 支持多种使用方式。
- 支持自定义构建的 echarts
- 支持导出图片

如果你觉得解决了你的问题，并节省了时间，请在 github 上给我一个小星星 ^\_^

## 安装

```javascript
// 注意必须要加版本号，因为最新版本兼容了 Taro3 不兼容Taro2
npm install techarts@^1.0.5
```

## 使用

```jsx
import EChart from 'techarts';
// 自定义构建的echarts
import * as echarts from './echarts';

// 基本用法
<EChart echarts={echarts} option={option} />;
// 通过组件实例设置数据
<EChart
  ref={(node) => {
    this.chart = node;
  }}
  echarts={echarts}
/>;
this.chart.setOption({...});
// 自定义初始化
<EChart echarts={echarts} onInit={this.onInit} />;

onInit = (canvas, width, height, dpr) => {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr,
  });
  canvas.setChart(chart);
  chart.setOption(this.state.option);
  // this.chart = chart; // 通过chart也可以setOption
  // chart.on('click', e => {})
  // chat.on('selectchanged', e => {})
  return chart; // 必须return
};
// 以上三种用法可以结合使用
```

## 参数

| 参数名称     | 解释                                                                                                                             | 默认值 | 是否必填 |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- |
| echarts      | echarts 对象。建议去[官网](https://www.echartsjs.com/zh/builder.html)自定义构建；<br/>注意不要勾选“代码压缩”，可下载后自行压缩。 | -      | Y        |
| option       | 参数同[echart option](https://echarts.apache.org/zh/option.html#title)                                                           | -      | Y        |
| canvasId     | cancas-id 兼容低基础库版本（<2.9.0）时需要                                                                                       | -      | N        |
| disableTouch | 是否禁用手势                                                                                                                     | false  | N        |
| lazyLoad     | 需要拿到组件实例手动 init 的时候请传递 true                                                                                      | false  | N        |
| style        | 样式                                                                                                                             | -      | N        |
| onInit       | 需要自定义 echarts init 时使用（可用此方式给 echarts 绑定事件）                                                                  | -      | N        |

## 实例 API

| API 名称             | 参数                                                                                                 | 回调参数  |
| -------------------- | ---------------------------------------------------------------------------------------------------- | --------- |
| init                 | callback                                                                                             | 同 onInit |
| setOption            | [echart option](https://echarts.apache.org/zh/option.html#title)                                     | -         |
| canvasToTempFilePath | 同[小程序](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html) | 同小程序  |
| getCanvasId          | 获取容器 id                                                                                          | -         |

## 示例

参照项目 [demo](https://github.com/elvinzhu/techarts/blob/master/demo/src/pages/index/index.jsx) 目录

## 注意事项

- Taro H5 本地开发时样式加载延时，导致 echarts 初始化宽高读取错误。build 之后正常
- `canvasToTempFilePath` h5 未实现定制宽高位置等功能

## License

MIT[@elvinzhu](https://github.com/elvinzhu)

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