526互联

taro中使用taro-react-echarts 好用~优秀~

发布时间 2023-06-09 14:36:14作者: ZerlinM

前提

taro版本 3.6.2
taro-react-echarts版本 1.2.2

项目中需要使用echarts

  • 最先尝试了 ec-canvas ,有小问题：
    偶现打开页面报错 ‘组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar"...’
    然后图表出不来，需要开发者工具清缓存并且代码修改下ec-canvas相关代码，再次重启。
    疑似和taro打包机制有关，引用的原生组件都会有这个问题。尚未解决~ 可在此查看细节

  • 再尝试了 taro3-echarts-react ，有小问题
    参照文档图表展示都没有问题，但是细节上，比如饼图label超出未省略，可在此查看细节
    也pass了~

  • 最终选用 taro-react-echarts

使用

安装

yarn add taro-react-echarts

导入组件

import Echarts from 'taro-react-echarts'

代码如下：

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 (
    <View style={{widht: '100%', height: '600rpx' }}>
      <Echarts
        echarts={echarts}
        option={option}
        ref={echartsRef}
        // isPage={false}
        // style自定义设置echarts宽高
        style={{widht: '100%', height: '100%'}} 
      />
    </View>
  );
}

注意

  • isPage 非必传 默认值：true
    表示是否是顶层页面级别 【1、注意嵌套在Popup 、Dialog 、Picker等弹出层都不是页面级别，需要设置为false，否则可能会不显示 2、以及嵌套在Tabs标签页中如果出现显示不正常，可设置isPage为false, 因为都有可能不触发useReady】

在本项目中，因为需要判断接口是否请求成功，成功则展示“图表页面”，否则展示“重试页面”，
最初代码中未写isPage={false}，图表一直出不来，之后加上isPage={false}图表加载成功，
其原因有可能是因为最初echartsRef是没有拿到导致未展示，此类判断后展示图表的情况，应该归为“不是页面级别”。

  • style 设置图表样式
    如果需要固定尺寸，需指定样式，否则按照默认尺寸展示。