taro-react-echarts

基于Taro3、React的H5和微信小程序多端图表组件

• 兼容H5、微信小程序

• 开箱即用，快速开发图表，满足在移动端各种可视化需求

• 支持自定义构建echarts

安装

1npm install taro-react-echarts

导入组件

1import Echarts from 'taro-react-echarts'

参数说明

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

Events

事件名	描述	类型	必传	默认值
onChartReady	当图表准备好时，将使用 echarts 对象作为参数回调函数	Function	否

使用

1import { useRef } from 'react'
2import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
3import echarts from '@/assets/js/echarts.js'
4
5export default function Demo() {
6 const echartsRef = useRef<EchartsHandle>(null)
7 const option: EChartOption = {
8    legend: {
9      top: 50,
10      left: 'center',
11      z: 100
12    },
13    tooltip: {
14      trigger: 'axis',
15      show: true,
16      confine: true
17    },
18    xAxis: {
19      type: 'category',
20      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
21    },
22    yAxis: {
23      type: 'value'
24    },
25    series: [
26      {
27        data: [150, 230, 224, 218, 135, 147, 260],
28        type: 'line'
29      }
30    ]
31  }
32
33  return (
34      <Echarts
35        echarts={echarts}
36        option={option}
37        ref={echartsRef}
38      ></Echarts>
39  );
40}

友情推荐

项目	描述
taro-react-table	基于 taro3、react 的 H5 和微信小程序多端表格组件