wuba/taro-visualization

taro-visualization

Introduction

Taro-visualization is consists of three packages taro-lottie, taro-3d and taro-charts, which is used for visual programming. And all of the three packages are cross-platform, and support users to develop WeChat mini-programs, H5 and React Native applications for Taro.

Installation

Install the package which you need.

yarn add taro-lottie
or 
yarn add taro-3d
or
yarn add taro-charts

Usage

taro-lottie

See the taro-lottie REAME to learn how to use taro-lottie

taro-3d

See the taro-3d REAME to learn how to use taro-3d

taro-charts

See the taro-charts REAME to learn how to use taro-charts

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

Apache-2.0

taro-visualization's Issues

taro-charts的npm包不可用

lib文件夹不在包内

小程序占用了太多代码空间

我只是这样导入了一下，都没用到这个组件，会占用大约50kb的代码空间

import { use, init } from 'echarts/core'

import { Echarts, EchartsRenderer } from 'taro-charts'
import { useEffect, useRef, useState } from 'react'
import { Layout } from '../Layout'

如果我只有svg或者skia其中的一个包会报错

有没有办法解决这个问题

lottie 无法启动

let animation: LottieViewType | null = null
    useReady(() => {
        // miniprogram needs to init after page onReady event
        if(animation){
            animation.init().then(r => {
                console.log(`animation启动${r?"成功":"失败"}.`)
            }).catch((e)=>{  console.log(`animation启动失败.错误原因:${e}`)});
        }else{
            console.log(`animation启动失败.`)
        }
    })

小程序执行错误:

animation启动失败.错误原因:TypeError: Cannot read property 'node' of null

显示的view部分:

<View className={`right-image ${isDisabled ? 'disabled' : ''}`}
                      onTouchStart={handleClick} onTouchEnd={handleReleaseClick}
                      onClick={() => {
                          }}
                    >
                        <LottieView
                          ref={(anim) => animation = anim}
                          style={{width: 100, height: 100}}
                          autoPlay
                          loop
                          source={require('assets/react.json')}
                        />
                    </View>

而且还有一些其他报错信息

发现 Lottie 动态创建 canvas 组件，但小程序不支持动态创建组件，接下来可能会出现异常


VM394:22 WXMLRT_$gwx:./base.wxml:template:231:20: Template `tmpl_0_15` not found.

[WXML Runtime warning] ./base.wxml
 Template `tmpl_0_15` not found.
  229 |   <view hover-class="{{xs.b(i.p1,'none')}}" hover-stop-propagation="{{xs.b(i.p4,!1)}}" hover-start-time="{{xs.b(i.p2,50)}}" hover-stay-time="{{xs.b(i.p3,400)}}" bindtouchstart="eh" bindtouchmove="eh" bindtouchend="eh" bindtouchcancel="eh" bindlongpress="eh" animation="{{i.p0}}" bindanimationstart="eh" bindanimationiteration="eh" bindanimationend="eh" bindtransitionend="eh" style="{{i.st}}" class="{{i.cl}}" bindtap="eh"  id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">
  230 |     <block wx:for="{{i.cn}}" wx:key="sid">
> 231 |       <template is="{{xs.a(c, item.nn, l)}}" data="{{i:item,c:c+1,l:xs.f(l,item.nn)}}" />
      |                    ^
  232 |     </block>
  233 |   </view>
  234 | </template>

H5报错，需要修改如下

import { View } from '@tarojs/components';
import { CanvasRenderer } from 'echarts/renderers';
import React, { useEffect, useRef } from 'react';
import { useMemo } from 'react';

interface IProps {
  canvasId?: string;
  onContextCreate: (canvas: HTMLCanvasElement | null) => void;
}

function EchartsComponetH5(props: IProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const viewRef = useRef<HTMLDivElement>(null);

  const { canvasId, onContextCreate, ...domProps } = useMemo(() => {
    return { ...props };
  }, [props]);

  useEffect(() => {
    const canvas = canvasRef.current;
    const view = viewRef.current;
    let viewResizeObserver: ResizeObserver;
    if (view && canvas) {
      viewResizeObserver = new ResizeObserver((entries) => {
        canvas.height = entries[0].contentRect.height;
        canvas.width = entries[0].contentRect.width;
      });
      viewResizeObserver.observe(view);
    }
    return () => {
      if (viewResizeObserver && view) {
        viewResizeObserver.unobserve(view);
      }
    };
  }, []);

  useEffect(() => {
    const canvas = canvasRef.current;
    canvasRef.current && onContextCreate(canvas);
  }, [canvasRef]);

  return (
   // 将此处View换成div
    <div {...domProps} ref={viewRef}>
      <canvas id={canvasId ?? 'i-echarts'} ref={canvasRef} />
    </div>
  );
}
export const Echarts = EchartsComponetH5;
export const EchartsRenderer = CanvasRenderer;

taro-echarts

Cannot read property 'node' of null

taro,3.6.2

小程序监听事件不触发

监听饼图的点击事件没有反应，点击饼图的块也不会突出显示，rn上正常

chart.on('click', e => {
  onSelect(e.dataIndex)
})

小程序上一个页面同时调用多个图表，只显示第一个

后面的没有显示出来

小程序端卸载的时候报错

执行chart.current?.dispose()的时候报下面的错误

TypeError: el.removeEventListener is not a function
at removeEventListener (._node_modules_zrender_lib_core_event.js:97)
at unmountDOMEventListeners (._node_modules_zrender_lib_dom_HandlerProxy.js:242)
at HandlerDomProxy.define.push../node_modules/zrender/lib/dom/HandlerProxy.js.HandlerDomProxy.dispose (._node_modules_zrender_lib_dom_HandlerProxy.js:272)
at Handler.define.push../node_modules/zrender/lib/Handler.js.Handler.dispose (._node_modules_zrender_lib_Handler.js:121)
at ZRender.define.push../node_modules/zrender/lib/zrender.js.ZRender.dispose (._node_modules_zrender_lib_zrender.js:233)
at ECharts.dispose (._node_modules_echarts_lib_core_echarts.js:916)
at ._src_base_components_Chart_index.jsx:73
at k (._node_modules_preact_hooks_dist_hooks.module.js:1)
at ._node_modules_preact_hooks_dist_hooks.module.js:1
at Array.forEach ()(env: macOS,mp,1.06.2301160; lib: 2.30.2)