Skip to content

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

License

Notifications You must be signed in to change notification settings

qiuweikangdev/taro-react-echarts

Repository files navigation

taro-react-echarts

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

  • 兼容H5、微信小程序

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

  • 支持自定义构建echarts

安装

npm install taro-react-echarts

导入组件

import 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

使用

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 和微信小程序多端表格组件