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' ...
使用
引入
示例代码:以折线图为例
<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 | 支付宝小程序 | 百度小程序 | 字节跳动小程序 |
---|---|---|---|---|---|
√ | √ | × | × | × | × |
微信小程序获取图片示例代码
thischartRef = node preview = async { // 获取到临时图片地址 const path = await thischartRef Taro } { return <View> <Button onClick=thispreview>查看生成图片</Button> <Chart ref=thissetChartRef 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> }