https://github.com/eyelly-wu/taro-echarts
适用于 Taro 项目的 ECharts 图表组件，欢迎提 PR
https://github.com/eyelly-wu/taro-echarts
echarts taro
Last synced: 6 months ago
JSON representation
适用于 Taro 项目的 ECharts 图表组件，欢迎提 PR
- Host: GitHub
- URL: https://github.com/eyelly-wu/taro-echarts
- Owner: eyelly-wu
- License: mit
- Created: 2019-05-22T14:31:22.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-11-09T14:11:25.000Z (almost 3 years ago)
- Last Synced: 2024-10-28T12:11:52.646Z (12 months ago)
- Topics: echarts, taro
- Language: JavaScript
- Homepage:
- Size: 3.66 MB
- Stars: 41
- Watchers: 1
- Forks: 10
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Taro-Echarts
适用于Taro项目的ECharts图表组件，基于项目[echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin)封装
## 安装
```bash
npm i -S taro-echarts
```
## 配置
修改Taro项目的配置`config/index`
1. [copy](https://nervjs.github.io/taro/docs/config-detail.html#copy)
```js
copy: {
patterns: [
// 需添加如下配置
{
from: 'node_modules/taro-echarts/components/ec-canvas/',
to: 'dist/npm/taro-echarts/components/ec-canvas',
ignore: ['ec-canvas.js', 'wx-canvas.js']
}
],
options: {
}
}
```
2. [h5.esnextModules](https://nervjs.github.io/taro/docs/config-detail.html#h5esnextmodules)
```js
h5: {
// 需添加如下配置
esnextModules: ['taro-echarts'],
...
}
```
## 使用
引入
```js
import Chart from 'taro-echarts'
```
示例代码：以折线图为例
```js
```
## API
| 属性名 | 说明 | 类型 | 默认值 |
| ----------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------- | :----- |
| width | 图表的宽 | string | 100% |
| height | 图表的高 | string | 200px |
| option | ECharts的[option配置](https://www.echartsjs.com/option.html) | object | - |
| onBeforeSetOption | 在echarts首次调用setOption前执行该方法，该方法会返回echarts的引用，可以在该方法中[注册地图](https://www.echartsjs.com/api.html#echarts.registerMap)，[注册主题](https://www.echartsjs.com/api.html#echarts.registerTheme)等 | (echarts)=>void | - |
| customStyle | 自定义容器样式 | string | - |
| loading | 是否显示loading效果 | bool | false |
| loadingConf | loading效果的样式[配置](https://www.echartsjs.com/api.html#echartsInstance.showLoading) | object | - |
## 支持度
| h5 | 微信小程序 | ReactNative | 支付宝小程序 | 百度小程序 | 字节跳动小程序 |
| :---: | :--------: | :---------: | :----------: | :--------: | :------------: |
| √ | √ | × | × | × | × |
## 微信小程序获取图片示例代码
```js
import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import Chart from 'taro-echarts'
export default class Page extends Component {
setChartRef = node => this.chartRef = node
preview = async () => {
// 获取到临时图片地址
const path = await this.chartRef.getImagePath()
Taro.previewImage({ current: path, urls: [path] })
}
render() {
return (
查看生成图片
)
}
}
```
## License
[MIT](https://github.com/eyelly-wu/taro-echarts/blob/master/LICENSE)