我react 第一次进组件的时候数据渲染了2次，以后在刷新就恢复原样了

[caozhiwei]

import React from 'react';
import PropTypes from 'prop-types';
import 'echarts-wordcloud';
import ReactEcharts from 'echarts-for-react';
import Basic from './Basic';

export default class WordCloud extends Basic {
  getOption(props) {
    const { config, onTooltipFormat } = props;
    const option = {
      tooltip: {
        trigger: 'axis',
        enterable: true,
      },
      series: [{
        type: 'wordCloud',
        sizeRange: config.sizeRange || [6, 66], // 字的大小区间范围
        rotationRange: config.rotationRange || [-90, 90], // 字的旋转角度区间范围
        shape: 'circle',
        left: config.left || 'center',
        top: config.top || 'center',
        width: config.width || '70%',
        height: config.height || '80%',
        right: config.right || null,
        bottom: config.bottom || null,
        rotationStep: config.rotationStep || 45,
        gridSize: config.gridSize || 10, // 字间距 
        drawOutOfBound: false,
        textStyle: {
          normal: {
            fontFamily: config.fontFamily || 'sans-serif',
            fontWeight: config.fontWeight || 'bold',
            color: () => {
              return `rgb(${[
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
              ].join(',')})`;

              // const num = Math.round(Math.random() * 9)
              // return  this.color[num];
            },
          },
          emphasis: {
            shadowBlur: config.shadowBlur || 10, // 阴影的模糊级数
            shadowColor: config.shadowColor || '#333', // 阴影的颜色
          },
        },
        data: config.data,
      }],
    };

    if (config.title) {
      option.title = {
        text: config.title,
        subtext: config.subtitle,
        textStyle: { color: this.titleColor, fontSize: this.titleSize },
        x: 'center',
      };
    }
    if (onTooltipFormat) {
      option.tooltip.formatter = params => onTooltipFormat(params);
    }

    return option;
  }
  render() {
    return (
      <ReactEcharts
        option={this.getOption(this.props)}
        style={this.props.style || { height: 500, width: '100%' }}
        notMerge
        lazyUpdate={false}
        onEvents={this.props.onEvents}
      />
    );
  }
}

WordCloud.propTypes = {
  config: PropTypes.shape({
    data: PropTypes.array.isRequired,
    gridSize: PropTypes.number,
    sizeRange: PropTypes.array,
    rotationRange: PropTypes.array,
    rotationStep: PropTypes.number,
    left: PropTypes.string,
    right: PropTypes.string,
    center: PropTypes.string,
    bottom: PropTypes.string,
    width: PropTypes.string,
    height: PropTypes.string,
    fontFamily: PropTypes.string,
    fontWeight: PropTypes.string,
    title: PropTypes.string,
    subtitle: PropTypes.string,
  }).isRequired,
  style: PropTypes.object,
  onTooltipFormat: PropTypes.func,
  onEvents: PropTypes.object,
};

[buctwbzs]

vue也出现过这种情况

[CaBeta]

angular也出现这种情况 使用 echarts 4.1.0 echarts-wordcloud 1.1.3 ngx-echarts 4.1.0

[diyxiaoshitou]

这么解决啊？

[CaBeta]

@diyxiaoshitou 我用延迟渲染（可能）解决了这个问题

render(reqText: string): void {
    if (!reqText) return;
    this.loading = true;
    this.fetchData(reqText).pipe(
      delay(100)
    ).subscribe((res: TagItem[]) => {
      this.renderTag(res);
      this.loading = false;
    });
  }

  renderTag(data: TagItem[]) {
    this.wordCloudOptions = this.wordCloudService.getOptions(data);
    this.items = data;
  }

[xushaocong]

把 rotationRange 设置为 [0, 0]，就不会出现这个问题，似乎是个 bug

[mertkug]

Will this issue going to be fixed @pissang @Ovilia ? It happens in Vue version as well.