Closed CraKeyBoy closed 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>
)
} }
这是我的代码。可以演示用。
@CraKeyBoy 报错已经修复;不过heightPx必须要初始化一个值,图表才能正常显示
已测试,可以正常使用。非常感谢
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 了,我试了一下,不是版本的兼容问题。但是也不知道怎么解决。