동적 어운

정적 어운이라면 echarts의 어운을 추천합니다. 어운의 모양을 사용자 정의할 수 있어 편리하고 반복해서 바퀴를 만들 필요가 없습니다.동적 양식을 추가하기 위한 문서를 찾지 못했습니다. 필요에 따라 다시 한 번 요약해 보겠습니다

코드

환경 react

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import styleProps from '../ChartSetting/styleProps';

const ColorList = ['#21bfd7', '#461ba9', '#d838ab', '#2c84f0', '#21d78f', '#cf6172'];

let timer = null;

class TagesCharts extends PureComponent {
    constructor(props) {
        super(props)
        this.renderKeyWord = this.renderKeyWord.bind(this);
        this.initialize = this.initialize.bind(this);
        this.starmove = this.starmove.bind(this);
        this.setTimeout = this.setTimeout.bind(this);
    }

    componentDidUpdate() {
        let children = this.Chart.childNodes;
        for (let i = 0; i < children.length; i++) {
            children[i].pause = 1;
            children[i].time = null;
            this.initialize(children[i]);
        }
        this.setTimeout(children);
    }

    setTimeout(children) {
        timer = setTimeout(() => {
            clearTimeout(timer)
            this.starmove(children)
            this.setTimeout(children)
        }, 50)
    }

    starmove(children) {
        for (let i = 0; i < children.length; i++) {
            if (children[i].offsetTop <= -children[i].offsetHeight) {
                children[i].style.top = `${this.Chart.offsetHeight}px`;
                this.initialize(children[i]);
            } else {
                children[i].style.top = `${children[i].offsetTop - children[i].getAttribute('ispeed')}px`;

            }
        }
    }

    componentWillUnmount() {
        clearTimeout(timer)
    }

    initialize(item) {
        let iLeft = parseInt(Math.random() * this.Chart.offsetWidth);
        let keyWeight = item.getAttribute('value');
        let iTimer = parseInt(keyWeight * 1500);
        item.pause = 0;
        if ((iLeft - item.offsetWidth) > 0) {
            item.style.left = `${iLeft - item.offsetWidth}px`;
        } else {
            item.style.left = `${iLeft}px`;
        }
        clearTimeout(item.time);
        item.time = setTimeout(() => {
            item.pause = 1;
        }, iTimer);
    }

    renderKeyWord() {
        let { data } = this.props;
        let len = ColorList.length;
        if (Object.keys(data).length) {
            let arr = [];
            let index = 0;
            for (let key in data) {
                arr.push({
                    name: key,
                    value: Math.sqrt(data[key]),
                    color: ColorList[index]
                })
                index = (index + 1) % len === 0 ? 0 : index + 1;
            }
            return arr.map((item) => {
                let fontSize = `${Math.sqrt(styleProps.bodyFontSize) * Math.sqrt(item.value)}px`;

                return 
                    {item.name}
                
            })
        } else {
            return []
        }
    }

    render() {
        let { className } = this.props;
        let keyWord = this.renderKeyWord();
        return (
            
 { this.Chart = node }}>
                {keyWord}
            
        )
    }
}

TagesCharts.propTypes = {
    data: PropTypes.object, //      
    className: PropTypes.string
};

export default TagesCharts

효과:

demo.gif

보태다

이 수요에서 요구하는 것은 위로 이동하는 것이다. 그러나 아이들이 구형으로 이동하고 싶다면 아래 링크에서 첫 번째를 제외하고도 참고할 수 있다.어린 친구들이 더 좋은 생각이 있으면 댓글을 기억해!!!

참고 자료

https://m.ruzw.com/html/201805/330.html http://www.cnblogs.com/axes/p/3501424.html http://www.matao.me/test/tag-cloud.html https://blog.csdn.net/huozi07/article/details/48177079?locationNum=6&fps=1