Taro小程序集成echart

简介

小程序要集成图表有很多方式，尝试使用F2，uchart....等多个图表，其中集成进去包最小的是F2，但是F2对于Taro+Typescript的小程序的来说，不是很方便，但是架不住人家编译后的包小，最后我选择用Echart，下面就介绍在集成的方式以及遇到的一些问题。

准备图表

首先你需要到Echart官方去选择你需要到图表的，同样你也可以在它的官网上进行调试。

然后从Echart.js从这里下载echart.js文件。

建议选择4.x的版本，目前测试过5.x编译出来是500kb左右，4.x打印出来大概是300kb左右，如果你对交互没有太多要求，建议可以选择4.0或者是3.x的版本，这样编译出来的js文件会特别小。

集成工具

本人使用的环境是Taro+Typescript的写法，所以我用的echart-taro3-react，把echart-taro3-react下载到自己的项目内。

设置options

text

    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data,
          type: 'line',
        },
      ],
    }

图表刷新数据

注意，这里最好是加个延迟，如果不加延迟的话，图表的动画会刷新次数过多，导致闪屏，这边用的是1s，可以根据自己的需求来修改。

text

  useEffect(() => {
    // 建议加延迟，避免初始化的时候刷新次数过多，导致图表出现闪屏的情况
    setTimeout(() => {
      if (echartsRef.current) {
        echartsRef?.current?.refresh(lineOption)
      }
    }, 1000)
  }, [])

最后附上完整demo

text

import React, { useEffect, useRef } from 'react'
import { EChart } from 'src/echarts-taro3-react'

const Demo: React.FC = () => {
  const echartsRef = useRef<any>(null)

  // data最好是处理优先处理好
  const newData = [150, 230, 224, 218, 135, 147, 260]

  const lineOption = (data: any[]) => {
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data,
          type: 'line',
        },
      ],
    }
    return option
  }

  useEffect(() => {
    // 建议加延迟，避免初始化的时候刷新次数过多，导致图表出现闪屏的情况
    setTimeout(() => {
      if (echartsRef.current && newData && newData.length > 0) {
        echartsRef?.current?.refresh(lineOption(newData))
      }
    }, 1000)
  }, [newData])

  return (
    // 注意这里需要设置宽高，不然不会图表不是显示
    <view style={{ height: '200px !important', backgroundSize: '100%' }} className="bg-no-repeat">
      <EChart ref={echartsRef} canvasId="echart-chart" />
    </view>
  )
}

export default Demo

感谢

感谢作者echarts-taro3-react