今天需要几个图,这几个图一页肯定显示不出来,因此使用react-native的ScrollView,但是怎么样也滑动不了,郁闷
后来把contentContainerStyle这个样式去了好了,弄了一下午
import React,{ Component } from 'React'; import { View, Text, Image, ScrollView, StyleSheet, Platform, } from 'react-native'; import Echarts from 'native-echarts'; let data; export default class WzDashBoard extends Component{ constructor(props) { super(props); this.state = { option : { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } }; } componentDidMount(){ // data = this.genData(3); // this.refreshOptions(); } refreshOptions(){ this.setState({ option : { title : { text: '同名数量统计', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', }, legend: { type: 'scroll', orient: 'vertical', right: 10, top: 20, bottom: 20, data: data.legendData, selected: data.selected }, series : [ { name: '姓名', type: 'pie', radius : '55%', center: ['40%', '50%'], data: data.seriesData, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } }); } render(){ return( <View style={styles.container}> <ScrollView showsVerticalScrollIndicator={true}> <Text> this is dashboard </Text> <Echarts option={this.state.option} width={300} height={100} /> <Echarts option={this.state.option} width={300} height={100} /> <Echarts option={this.state.option} width={300} height={200} /> <Echarts option={this.state.option} width={300} height={200} /> <Echarts option={this.state.option} width={300} height={100} /> <Echarts option={this.state.option} width={300} height={100} /> <Echarts option={this.state.option} width={300} height={100} /> <Echarts option={this.state.option} width={300} height={100} /> <View style={{height:Platform.OS == 'ios' ? 0:30,}}></View>//这个可以加,也可以不加 </ScrollView> </View> ) } genData(count) { let nameList = [ '赵', '钱', '孙', '危' ]; let legendData = []; let seriesData = []; let selected = {}; for (let i = 0; i < 4; i++) { name = Math.random() > 0.65 ? makeWord(4, 1) + '·' + makeWord(3, 0) : makeWord(2, 1); legendData.push(name); seriesData.push({ name: name, value: Math.round(Math.random() * 100000) }); selected[name] = i < 6; } return { legendData: legendData, seriesData: seriesData, selected: selected }; function makeWord(max, min) { let nameLen = Math.ceil(Math.random() * max + min); let name = []; for (let i = 0; i < nameLen; i++) { name.push(nameList[Math.round(Math.random() * nameList.length - 1)]); } return name.join(''); } } } const styles = StyleSheet.create({ container:{ flex:1, justifyContent:'center', alignItems: 'center', backgroundColor:'#F5FCFF' } });