echarts-taro3-react

基于taro3.x-react版本构建的微信小程序echarts组件

安装

npm i echarts-taro3-react 将 echarts-taro3-react 下载至本地，放置在src目录下

解决代码体积过大问题

自定义echart.js，自行前往echart官网 （注意：版本需要选择4.9.0，不要勾选压缩，可下载下来后自行压缩） 按需构建echart.js，然后替换掉echarts-taro3-react/ec-canvas/echart.js

我这里图表只选择了折线图，构建完后替换掉是这样的

到这里就可以按照下面的使用示例在开发者工具上看看效果了，这时候可能会报错 el.addEventListener is not a function，我这边的处理方法是在 echart.js 文件里找到对应列注释掉，如果还有其他方法解决的也可以。

本地压缩方法

npm install uglify-js -g 
uglifyjs echarts.js -m -o echarts.min.js

生成 echarts.min.js 后将里面的内容替换掉 echarts.js 的内容, 然后把 echarts.min.js 删掉

使用示例

/pages/index/index.tsx

import React, { useRef, useEffect } from 'react'
import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { EChart } from "../../echarts-taro3-react";
import './index.scss'

export default function Index() {
  const refBarChart = useRef<any>()
  const defautOption = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "line",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(220, 220, 220, 0.8)",
        },
      },
    ],
  };
  useEffect(() => {
    if(refBarChart.current) {
        refBarChart.current?.refresh(defautOption);
    }
  })

  return (
    <View className='index'>
      <EChart ref={refBarChart} canvasId='line-canvas' />
    </View>
  )
}

/pages/index/index.scss

.index {
  width: 100vw;
  height: 100vh;
  background-color: #F3F3F3;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url('../../assets/home-bg.svg');
}

echarts-wordcloud

由于官方的echarts-wordcloud不支持微信小程序，我找到了一个基于微信小程序修改的词云图组件echarts-for-weixin-wordcloud

将项目中的 echarts-wordcloud 拷贝到自己的项目中
引入wordcloud,并配置

import wordCloud from "../../echarts-wordcloud/wordCloud";

wordCloud({
  createCanvas: function () {
    return wx.createOffscreenCanvas({
      type: "2d",
    });
  },
});

找到引入 echarts 的文件，将引入地址改成上面 echarts-taro3-react 的
在页面使用，跟官方使用方法一样了

Demo

最后放一下个人封装的 echarts 组件 demo

CustomEchart.tsx

import React, { useEffect, useRef } from 'react'
import { EChart } from "../../echarts-taro3-react";
import wordCloud from '../../echarts-wordcloud/wordCloud'

interface ReEchartProps {
  option: object,
  canvasId: string
}

const ReEchart: React.FC<ReEchartProps> = ({ option, canvasId }) => {
  const refChart = useRef<any>()

  useEffect(() => {
    wordCloud({
      createCanvas: function () {
        return wx.createOffscreenCanvas({
          type: "2d",
        });
      },
    });
  }, [])

  useEffect(() => {
    if (refChart.current && option) {
      refChart.current.refresh(option);
    }
  }, [option])

  return <EChart ref={refChart} canvasId={canvasId} />
}

export default ReEchart

Taro+React开发微信小程序-echarts