Taro-Echarts
适用于Taro项目的ECharts图表组件，基于项目echarts-for-weixin封装
安装
npm i -S taro-echarts配置
修改Taro项目的配置config/index
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: {
}
}h5: {
// 需添加如下配置
esnextModules: ['taro-echarts'],
...
}使用
引入
import Chart from 'taro-echarts'示例代码：以折线图为例
<Chart
option={{
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}}
/>API
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 图表的宽 | string | 100% |
| height | 图表的高 | string | 200px |
| option | ECharts的option配置 | object | - |
| onBeforeSetOption | 在echarts首次调用setOption前执行该方法，该方法会返回echarts的引用，可以在该方法中注册地图，注册主题等 | (echarts)=>void | - |
| customStyle | 自定义容器样式 | string | - |
| loading | 是否显示loading效果 | bool | false |
| loadingConf | loading效果的样式配置 | object | - |
支持度
| h5 | 微信小程序 | ReactNative | 支付宝小程序 | 百度小程序 | 字节跳动小程序 |
|---|---|---|---|---|---|
| √ | √ | × | × | × | × |
微信小程序获取图片示例代码
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 (
<View>
<Button onClick={this.preview}>查看生成图片</Button>
<Chart
ref={this.setChartRef}
loadingConf={{ textColor: 123 }}
option={{
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}}
/>
</View>
)
}
}