echarts不显示，但是某次刷新或者修改了配置又会显示

85636682 commented 4 years ago

引入组件，配置没错，但是不显示图片，也没报错。经过一些修改，或者刷新，会忽然又显示，但是影响了其他布局的样式。请问这需要怎么解决？

elvinzhu commented 4 years ago

根据你描述，感觉应该试容器宽度控制问题，请检查代码

85636682 commented 4 years ago

<View class="chart grid col-1 padding-sm">
   <EChart echarts={echarts} option={option} />
</View>

chart是width100%，也试过固定宽度，还是空白

elvinzhu commented 4 years ago

尝试高度也写死。不行的话，给我一个代码片段链接我帮你看下

songkeys commented 4 years ago

同遇到这个问题，有时显示有时不显示……是随机出现的。某个页面刷新/第二次进入后可能就显示/不显示了

onError 没有报错

85636682 commented 4 years ago

@elvinzhu 下面是代码，我也用了echarts-for-weixin，也用了techarts，但是同一个option，echarts-for-weixin能显示，但是techarts不能显示

import Taro, { Component } from '@tarojs/taro'
import { Picker, View, Button, Text } from '@tarojs/components'
import { getWindowHeight } from "@utils/style";
import dayjs from 'dayjs'
import classNames from 'classnames'
import { connect } from '@tarojs/redux'
import ListView, { LazyBlock } from "taro-listview";
import { dispatchReportDetail } from "@actions/detail";
import { ClLoading } from "mp-colorui";
import WPicker from '../../components/wPicker/index'
import * as echarts from '../../components/ec-canvas/echarts'
import EChart from 'techarts';

import './index.scss'

const dateSelector = {
  fields: "day",
  start: "",
  end: ""
};

const defer = () => {
  const deferred = {}
  deferred.promise = new Promise((resolve, reject) => {
    deferred.resolve = resolve
    deferred.reject = reject
  })
  return deferred
}

const chartDefer = defer()

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  })
  canvas.setChart(chart)
  chartDefer.resolve(chart);

  return chart
}

@connect(
  state => {
    return { ...state.detail };
  },
  { dispatchReportDetail }
)
class Details extends Component {

  config = {
    navigationBarTitleText: '数据详情',
    usingComponents: {
      'ec-canvas': '../../components/ec-canvas/ec-canvas' // 书写第三方组件的相对路径
    }
  }

  state = {
    ec: {
      onInit: initChart
    },
    loading: false,
    hasMore: true,
    height: getWindowHeight(),
    beginAt: dayjs().startOf('month').format('YYYY-MM-DD'),
    endAt: dayjs().endOf('month').format('YYYY-MM-DD'),
    filterSelected: '',
    option: {}
  }

  constructor(props) {
    super(props);
    this.slug = this.$router.params.slug;
  }

  componentDidMount = () => {
    this.loadMore(true);
  }

  componentWillReceiveProps (nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount () {
    const newDefer = defer()
    chartDefer.promise = newDefer.promise
    chartDefer.resolve = newDefer.resolve
    chartDefer.reject = newDefer.reject
  }

  componentDidShow () { }

  componentDidHide () { }

  pullDownRefresh = rest => {
    this.loadMore(true);
    rest && rest();
  };

  onScrollToLower = async fn => {
    await this.loadMore();
    fn && fn();
  };

  loadMore = isGetNew => {
    if (!isGetNew && (!this.state.hasMore || this.state.loading)) {
      return;
    }

    let page = 1;
    if (!isGetNew) {
      page = this.props.page + 1;
    }
    this.setState({ loading: true });
    return this.props.dispatchReportDetail({
      slug: this.slug,
      page: page,
      begin_date: this.state.beginAt,
      end_date: this.state.endAt,
      filter: this.state.filterSelected
    }).then(async res => {
      if (this.props.hasChart) {
        const chart = await chartDefer.promise
        chart.setOption(this.props.chart, true)
        console.info(this.props.chart)
        this.setState({
          option: this.props.chart
        })
      }
      this.setState({
        loading: false,
        hasMore: res && res.total > this.props.tableRows.length
      });
    })
    .catch(() => {
      this.setState({ loading: false });
    });
  };

  queryByToday() {
    this.setState({
      beginAt: dayjs().format('YYYY-MM-DD'),
      endAt: dayjs().format('YYYY-MM-DD')
    }, () => {
      this.loadMore(true);
    })
  }

  queryByCurrentMonth() {
    this.setState({
      beginAt: dayjs().startOf('month').format('YYYY-MM-DD'),
      endAt: dayjs().endOf('month').format('YYYY-MM-DD')
    }, () => {
      this.loadMore(true);
    })
  }

  queryByCurrentYear() {
    this.setState({
      beginAt: dayjs().startOf('year').format('YYYY-MM-DD'),
      endAt: dayjs().endOf('year').format('YYYY-MM-DD')
    }, async () => {
      this.loadMore(true);
    })
  }

  changeBeginAt(e) {
    this.setState({
      beginAt: e.detail.value
    }, () => {
      this.loadMore(true);
    })
  }

  changeEndAt(e) {
    this.setState({
      endAt: e.detail.value
    }, () => {
      this.loadMore(true);
    })
  }

  insRef = node => {
    this.refList = node;
  };

  showFilterPicker = () => {
    this.WPicker.show()
  }

  onWPickerRef = (ref) => {
    this.WPicker = ref;
  }

  onConfirm = (type, e) => {
    let value = ''
    console.info(e)
    if (this.props.filterLevel === 1) {
      value = e.obj.value
    } else {
      for ( let i = e.value.length -1; i >= 0; i-- ) {
        if (e.value[i] !== '' && e.value[i] !== undefined) {
          value = e.value[i]
          break
        }
      }
    }
    this.setState({
      filterSelected: value
    }, () => {
      this.loadMore(true);
    })
  }

  onCancel = () => {
    console.log('cancel')
  }

  render () {
    const {
      tableRows,
      hasChart,
      hasCard,
      hasDate,
      hasBeginDate,
      hasEndDate,
      hasFilter,
      filter,
      filterLevel,
      amount,
      title
    } = this.props;
    return (
      <View className='details'>
        <ClLoading
          type="modal"
          show={this.state.loading}
          imgUrl="https://mp-yys-1255362963.cos.ap-chengdu.myqcloud.com/loading.gif"
        />
        <ListView
          className='home__wrap'
          lazy
          ref={node => this.insRef(node)}
          isLoaded
          launch={{launchFooterLoading: !this.state.loading}}
          hasMore={this.state.hasMore}
          style={{ height: this.state.height }}
          onPullDownRefresh={fn => this.pullDownRefresh(fn)}
          onScrollToLower={this.onScrollToLower}
        >
          { hasCard ? 
          <View className="grid col-1 padding-sm">
            <View className="bg-gradual-orange padding radius text-center shadow-blur">
              <View className="card-title text-lg">{title}</View>
              <View className="card-content margin-top-sm">{amount}</View>
              { hasDate ? 
              <View className="card-footer margin-top-sm">
                { hasBeginDate ? 
                <Picker
                  mode="date"
                  value={this.state.beginAt}
                  start={dateSelector.start}
                  end={dateSelector.end}
                  fields={dateSelector.fields}
                  onChange={this.changeBeginAt}
                  className='longSelect'
                >
                  <View className="picker">{this.state.beginAt}</View>
                </Picker>
                : null}
                { hasBeginDate && hasEndDate ? 
                <Text className="to">至</Text>
                : null }
                { hasEndDate ? 
                <Picker
                  mode="date"
                  value={this.state.endAt}
                  start={dateSelector.start}
                  end={dateSelector.end}
                  fields={dateSelector.fields}
                  onChange={this.changeEndAt}
                  className='longSelect'
                >
                  <View className="picker">{this.state.endAt}</View>
                </Picker>
                : null }
              </View>
              : null }
            </View>
          </View>
          : null}
          { hasDate ? 
          <View className="grid col-3 padding-sm date-buttons">
            <Button onClick={this.queryByToday} className="cu-btn block round bg-orange shadow button-flex-1">本日</Button>
            <Button onClick={this.queryByCurrentMonth} className="cu-btn block round bg-orange shadow button-flex-1">本月</Button>
            <Button onClick={this.queryByCurrentYear} className="cu-btn block round bg-orange shadow button-flex-1">本年</Button>
          </View>
          : null}
          { hasChart ? 
          <View className="echarts grid col-1 padding-sm">
            <ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec={this.state.ec}></ec-canvas>
          </View>
          : null }
          { hasChart ? 
          <View className="echarts grid col-1 padding-sm">
            <EChart echarts={echarts} option={this.state.option} />
          </View>
          : null }
          <View className="grid col-1 padding-sm">
            <View className="bg-white radius text-center shadow-blur">
              <View key={index} className="bg-orange border-top-radius-5px list-item padding">
                <View className="flex">
                  <View className="font-size-18 text-left flex-sub">
                    明细数据
                  </View>
                  { hasFilter ? <View onClick={this.showFilterPicker} className="text-right flex-sub">刷选</View> : null }
                </View>
              </View>
              { tableRows.length > 0 ? 
                tableRows.map((item, index) => (
                <View key={index} className="list-item padding">
                  <View className="flex">
                    <View className="title text-left flex-sub">{item.name}</View>
                    { item.ext1 !== '' ? <View className="text-right flex-sub">{item.ext1}</View> : null }
                  </View>
                  <View className="flex">
                    <View className="text-left flex-sub">{item.value}</View>
                    <View className="text-right flex-sub">{item.date}</View>
                  </View>
                </View>
                ))
              : <View className='has-not-data'>暂无数据</View> }
            </View>
          </View>
        </ListView>
        { hasFilter ? 
        <WPicker
          mode={filterLevel === 1 ? "selector" : "linkage"}
          options={filter}
          level={filterLevel}
          timeout={true}
          confirm={this.onConfirm.bind(this, 'date')}
          cancel={this.onCancel}
          onRef={this.onWPickerRef}
        ></WPicker>
        : null }
      </View>
    )
  }
}

export default Details

elvinzhu commented 4 years ago

我尝试把初始化操作加载了 Taro.nextTick里面，你可以试试还有问题不

npm install techarts@1.0.5 // 注意版本号，最新版只对taro3兼容

elvinzhu / techarts

echarts不显示，但是某次刷新或者修改了配置又会显示 #6