README
taro-main-echarts
开箱即用的 Taro3(2.0 请参照 master 分支) echarts 组件. 据有以下特性:
- 支持多种使用方式。
- 支持自定义构建的 echarts
- 支持导出图片
其实用法与 npm i techarts是一样的,只是因为techarts没有添加构建的echar 导致去官网下载的echarts.js放入本地太大所以这边就将echarts.js放入包内,以便减少小程序的包内存
安装
npm install taro-main-echarts
使用
import MainEChart from 'taro-main-echarts';
// 自定义构建的echar
// 基本用法
<MainEChart
// echarts={echarts} 支持自定义构建的echar
option={{//option:https://echarts.apache.org/examples/zh/editor.html?c=doc-example/tutorial-styling-step2直接去官网复制
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}}
/>;
// 通过组件实例设置数据
<MainEChart ref={this.chart} echarts={echarts} />
this.chart.current.setOption({...});
// 自定义初始化
<MainEChart echarts={echarts} onInit={this.onInit} />;
onInit = (canvas, width, height, dpr) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr,
});
return chart; // 必须return
};
// 以上三种用法可以结合使用
参数
参数名称 | 解释 | 默认值 | 是否必填 |
---|---|---|---|
echarts | echarts 对象。建议去官网自定义构建; 注意不要勾选“代码压缩”,可下载后自行压缩。 |
- | Y |
option | 参数同echart option | - | Y |
canvasId | cancas-id 兼容低基础库版本(<2.9.0)时需要 | - | N |
disableTouch | 是否禁用手势 | false | N |
lazyLoad | 需要拿到组件实例手动 init 的时候请传递 true | false | N |
style | 样式 | - | N |
onInit | 需要自定义 echarts init 时使用 | - | N |
实例 API
API 名称 | 参数 | 回调参数 |
---|---|---|
init | callback | 同 onInit |
setOption | echart option | - |
canvasToTempFilePath | 同小程序 | 同小程序 |
getCanvasId | 获取容器 id | - |
示例
参照项目 demo 目录
注意事项
- Taro H5 本地开发时样式加载延时,导致 echarts 初始化宽高读取错误。build 之后正常
canvasToTempFilePath
h5 未实现定制宽高位置等功能