eyelly-wu / taro-echarts

适用于 Taro 项目的 ECharts 图表组件,欢迎提 PR
MIT License
41 stars 10 forks source link

报错 component.getState is not a function #2

Closed CraKeyBoy closed 5 years ago

CraKeyBoy commented 5 years ago

image

index.esm.js?eb37:1818 Uncaught TypeError: component.getState is not a function at updateComponent (index.esm.js?eb37:1818) at reRenderComponent (index.esm.js?eb37:1803) at ComponentWrapper.update (index.esm.js?eb37:2144) at patch (index.esm.js?eb37:933) at patchChildren (index.esm.js?eb37:985) at patch (index.esm.js?eb37:927) at updateComponent (index.esm.js?eb37:1851) at reRenderComponent (index.esm.js?eb37:1803) at ComponentWrapper.update (index.esm.js?eb37:2144) at patch (index.esm.js?eb37:933)

大佬在帮忙看看吧。 taro 已经升级到 1.3.10 了,我试了一下,不是版本的兼容问题。但是也不知道怎么解决。

CraKeyBoy commented 5 years ago

import Taro, { Component } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import Chart from 'taro-echarts'

import './index.scss'

export default class Index extends Component {

config = { navigationBarTitleText: '首页' }

constructor() { super(...arguments) this.state = { customStyle : '', heightPx: '' } }

componentWillMount() { }

componentDidMount() { const width = document.documentElement.clientWidth; const height = document.documentElement.clientHeight;

if (width < height) {

  let customStyle =
    'top:' + (height - width) / 2 + 'px;' +
    'left:' + (0 - (height - width / 2)) + 'px;' +
    'transform:rotate(90deg);' +
    'transform-origin: 50% 50%'

    this.setState({
      heightPx: width + 'px',
      customStyle
    })

} else {
  this.setState({
    heightPx: height + 'px',
    customStyle : ''
  })
}

window.addEventListener("orientationchange", () => {

  if (window.orientation === 90) {
    this.setState({
      heightPx: height + 'px',
      customStyle : ''
    })
  } else {
    let customStyle =
      'top:' + (height - width) / 2 + 'px;' +
      'left:' + (0 - (height - width / 2)) + 'px;' +
      'transform:rotate(90deg);' +
      'transform-origin: 50% 50%'

      this.setState({
      heightPx: width + 'px',
      customStyle
    })
  }
}, false);

}

componentWillUnmount() { }

componentDidShow() { }

componentDidHide() { }

render() { const {heightPx, customStyle} = this.state

return (
  <View className='index'>
    <Chart
      chartId='print'
      height={heightPx}
      customStyle={customStyle}
      option={{
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        dataZoom: [{
          startValue: 'Wed'
        }, {
          type: 'inside'
        }, {
          title: '缩放组件'
        }],
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      }}
    />
  </View>
)

} }

这是我的代码。可以演示用。

eyelly-wu commented 5 years ago

@CraKeyBoy 报错已经修复;不过heightPx必须要初始化一个值,图表才能正常显示 image

CraKeyBoy commented 5 years ago

已测试,可以正常使用。非常感谢