Taro-1.3 was used in the old project. Taro has recently been upgraded to taro-3.0. Please note the problems encountered

Ec-canvas does not work properly

A wrong

TypeError: this.Chart.init is not a function at LineChart.refresh (._src_pages_user_assets_components_chart_LineChart2.js:62) at UserTest.componentDidMount (._src_pages_user_user-test_user-test.jsx:45) at Lf (._node_modules_react-reconciler_cjs_react-reconciler.production.min.js:133) at hh (._node_modules_react-reconciler_cjs_react-reconciler.production.min.js:172) at define.push.. /node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority (._node_modules_scheduler_cjs_scheduler.production.min.js:18) at Pc (._node_modules_react-reconciler_cjs_react-reconciler.production.min.js:36) at Zg (._node_modules_react-reconciler_cjs_react-reconciler.production.min.js:169) at Og (._node_modules_react-reconciler_cjs_react-reconciler.production.min.js:160) at ._node_modules_react-reconciler_cjs_react-reconciler.production.min.js:37 at define.push.. /node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority (. _node_modules_scheduler_cjs_scheduler. Production. Min. Js: 18) (env: Windows, mp, 1.05.2109101; Lib: 2.19.5)Copy the code

Error cause: After the upgrade, TarO3 cannot directly obtain the original wechat applets through ref. Instead, it actually obtains TaroElement. GetCurrentInstance ().page.selectComponent(‘#mychart-area’)

import Taro, { getCurrentInstance } from "@tarojs/taro"
getCurrentInstance().page.selectComponent('#mychart-area').init((canvas, width, height) = > {
  console.log('canvas', canvas)
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  setChartData(chart, data);
  return chart;
});
Copy the code

TaroElement

Native applets Node

After fixing the above problem, a new error was reported:

Error 2

TypeError: t.addEventListener is not a function at te (._src_pages_user_assets_components_ec-canvas_echarts.js:37) at Oi (._src_pages_user_assets_components_ec-canvas_echarts.js:37) at ._src_pages_user_assets_components_ec-canvas_echarts.js:37 at Array.forEach (<anonymous>) at P (._src_pages_user_assets_components_ec-canvas_echarts.js:37) at ki (._src_pages_user_assets_components_ec-canvas_echarts.js:37) at new e (._src_pages_user_assets_components_ec-canvas_echarts.js:37) at new t (._src_pages_user_assets_components_ec-canvas_echarts.js:44) at Hi (._src_pages_user_assets_components_ec-canvas_echarts.js:44) at new e (. _src_pages_user_assets_components_ec - canvas_echarts. Js: 44) (env: Windows, mp, 1.05.2109101; Lib: 2.19.6)Copy the code

After some research, it is found that t in t. adddeventListener is the canvas parameter in our echarts.init method, and canvas is an instance of WxCanvas in ec-canvas/ wx-Canvas. An attempt was made to add the addEventListener method to the class. Error successfully fixed 😅.

const chart = echarts.init(canvas, null, {
  width: width,
  height: height
});
Copy the code
// wx-canvas.js
export default class WxCanvas {
  constructor(ctx, canvasId, isNew, canvasNode) {
    this.ctx = ctx;
    this.canvasId = canvasId;
    this.chart = null;
    this.isNew = isNew
    if (isNew) {
      this.canvasNode = canvasNode;
    }
    else {
      this._initStyle(ctx);
    }

    // this._initCanvas(zrender, ctx);

    this._initEvent();
  }
  
  // Add an empty function to fix the error when calling echarts.init
  addEventListener () {}

  getContext(contextType) {
    if (contextType === '2d') {
      return this.ctx; }}}Copy the code

The complete code

// pages/index/index.js
import _ from 'lodash'
import React, { Component } from 'react'
import { View } from '@tarojs/components'
import './user-test.less'
import LineChart from '.. /assets/components/chart/LineChart'

function createChartData () {
  let seriesDataLine = []
  let progressLine = [1.3.2.6.8.2]
  if (progressLine && progressLine.length) {
    seriesDataLine = _.map(progressLine, item= > {
      return {
        value: item,
        label: {
          position: item >= 0 ? 'top' : 'bottom'}}})}else {
    seriesDataLine = [0.0.0.0.0.0]}const chartData = {
    dimensions: {
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    measures: [{
      data: seriesDataLine
    }]
  }

  return chartData
}

export default class UserTest extends Component {
  constructor (props) {
    super(props)
    this.lineChart = React.createRef()
    this.state = {
    }
  }

  componentWillMount () {}

  componentDidMount () {
    // Delay the call to ensure that the EC-canvas node already exists
    setTimeout(() = > {
      this.lineChart.current.refresh(createChartData())
    }, 100)
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='page-user-test'>
        <View className='line-chart'>
          <LineChart ref={this.lineChart} />
        </View>
      </View>)}}Copy the code
// LineChart.js
import { Component } from "react"
import { getCurrentInstance } from "@tarojs/taro"
import * as echarts from ".. /ec-canvas/echarts"

function setChartData(chart, data) {
  let option = {
    color: ['#FF4040'].xAxis: [{type: 'category'.data: [].axisTick: {
          alignWithLabel: true}}].grid: {
      left: '5%'.right: '5%'.top: '20'.bottom: '5'.containLabel: true
    },
    yAxis: [{type : 'value'}].series: []};if (data && data.dimensions && data.measures) {
    option.xAxis[0].data = data.dimensions.data
    option.series = data.measures.map(item= > {
      return {
        ...item,
        type:'line'.smooth: true
      }
    })
  }
  chart.setOption(option);
}

export default class LineChart extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ec: {
        lazyLoad: true
      }
    }
  }

  componentDidMount () {}

  refresh(data) {
    getCurrentInstance().page.selectComponent('#mychart-area').init((canvas, width, height) = > {
      console.log('canvas', canvas)
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setChartData(chart, data);
      return chart;
    });
  }

  render() {
    return (
      <ec-canvas
        id='mychart-area'
        canvasId='mychart-area'
        ec={this.state.ec}
      />); }}Copy the code

A link to the

  • Wechat applets component Echarts-for-Weixin
  • Taro uses native modules
  • Taro3 component echarts taro3 — the react