基于Taro3、React的H5和微信小程序多端图表组件
-
兼容H5、微信小程序
-
开箱即用，快速开发图表，满足在移动端各种可视化需求
-
支持自定义构建echarts
npm install taro-react-echartsimport Echarts from 'taro-react-echarts'| 参数 | 描述 | 类型 | 必传 | 默认值 |
|---|---|---|---|---|
| 本身参数 | 参考Canvas 【微信小程序】 | |||
echarts |
echarts对象，可自定义构建 | echarts | 是 | |
option |
参考setOption | object | 是 | |
className |
echarts类名 | string | 否 | key |
style |
echarts样式对象 | object | 否 | {height: '300px'} |
className |
echarts类名 | string | 否 | |
theme |
echarts 的主题 | string | 否 | |
notMerge |
默认为true,不跟之前设置的option合并，保证每次渲染都是最新的option | boolean | 否 | true |
lazyUpdate |
setOption 时，延迟更新数据 | boolean | 否 | false |
showLoading |
图表渲染时，是否显示加载状态 | boolean | 否 | |
loadingOption |
参考loading配置项 | object | 否 | |
opts |
参考echarts. init | string | 否 | |
onEvents |
绑定 echarts 事件 | object | 否 | |
isPage |
表示是否是顶层页面级别 【1、注意嵌套在Popup 、Dialog 、Picker等弹出层都不是页面级别，需要设置为false，否则可能会不显示 2、以及嵌套在Tabs标签页中如果出现显示不正常，可设置isPage为false, 因为都有可能不触发useReady】 | boolean | 否 | true |
| 事件名 | 描述 | 类型 | 必传 | 默认值 |
|---|---|---|---|---|
onChartReady |
当图表准备好时，将使用 echarts 对象作为参数回调函数 | Function | 否 |
import { useRef } from 'react'
import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
import echarts from '@/assets/js/echarts.js'
export default function Demo() {
const echartsRef = useRef<EchartsHandle>(null)
const option: EChartOption = {
legend: {
top: 50,
left: 'center',
z: 100
},
tooltip: {
trigger: 'axis',
show: true,
confine: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
return (
<Echarts
echarts={echarts}
option={option}
ref={echartsRef}
></Echarts>
);
}| 项目 | 描述 |
|---|---|
| taro-react-table | 基于 taro3、react 的 H5 和微信小程序多端表格组件 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent