一、安裝echarts 和echarts-wordcloud

npm install echarts --save

npm install echarts-wordcloud --save

二、項目中引入echarts 和echarts-wordcloud

import echarts from 'echarts'

import 'echarts-wordcloud'

三、在生命周期componentDidMount 中初始化echarts

componentDidMount() {
    this.kpiEcharts = echarts.init(this.kpiRef.current);
    this.kpiEcharts.on('click', (params) => {
        this.props.onCkick(params.data)
    });
    let _this = this
    window.addEventListener("resize",function (){
        _this.kpiEcharts.resize();
    });
    this.setState({
        keyWordsList: this.props.keyWordsList
    })
    this.initChartOption()
}


initChartOption() {
    var maskImage = new Image();//可以根據圖片形狀生成有形狀的詞云圖
    maskImage.src=require('@/static/img/goToTop.png')
    let option = {
        backgroundColor: '#F7F7F7',
        tooltip: {
            trigger: 'item',
            axisPointer: {
            type: 'none'
            },
            position: "top",
            formatter: function({name, value}) {
            return `${name}:${value.toFixed(2)}`
            }
        },
        series: [{
            name: '搜索指數',
            left: 'center',
            top: 'center',
             '100%',
            height: '100%',
            right: null,
            bottom: null,
            type: 'wordCloud',
            size: ['9%', '99%'],
            sizeRange: [20, 100],
            //textRotation: [0, 45, 90, -45],
            rotationRange: [-45, 90],
            //shape: 'circle',
            // gridSize: 10,
            
            // shape: 'triangle',
            maskImage: maskImage,
            textPadding: 0,
            autoSize: {
                enable: true,
                minSize: 6
            },
            textStyle: {
                normal: {
                    color: function() {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#FF6A00'
                }
            },
            data: [
                {
                    name: 'Authentication',
                    value: 10000,
                    textStyle: {
                    normal: {
                        color: 'black'
                    },
                    emphasis: {
                        color: 'red'
                    }
                    }
                },
                {
                    name: 'Streaming of segmented content',
                    value: 6181
                },
                {
                    name: 'Amy Schumer',
                    value: 4386
                },
                {
                    name: 'Jurassic World',
                    value: 4055
                },
                {
                    name: 'Charter Communications',
                    value: 2467
                },
                {
                    name: 'Chick Fil A',
                    value: 2244
                },
                {
                    name: 'Planet Fitness',
                    value: 1898
                },
                {
                    name: 'Pitch Perfect',
                    value: 1484
                },
                {
                    name: 'Express',
                    value: 1112
                },
                {
                    name: 'Home',
                    value: 965
                },
                {
                    name: 'Johnny Depp',
                    value: 847
                },
                {
                    name: 'Lena Dunham',
                    value: 582
                },
                {
                    name: 'Lewis Hamilton',
                    value: 555
                },
                {
                    name: 'KXAN',
                    value: 550
                },
                {
                    name: 'Mary Ellen Mark',
                    value: 462
                },
                {
                    name: 'Farrah Abraham',
                    value: 366
                },
                {
                    name: 'Rita Ora',
                    value: 360
                },
                {
                    name: 'Serena Williams',
                    value: 282
                },
                {
                    name: 'NCAA baseball tournament',
                    value: 273
                },
                {
                    name: 'Point Break',
                    value: 265
                }
            ]
            
        }]
    };
    // this.kpiEcharts.setOption(option, true);
    let _this = this
    maskImage.onload = function() {
        _this.kpiEcharts.setOption(option, true);
    };
}

四、效果如下

總結

以上是生活随笔為你收集整理的react 项目使用 echarts-wordcloud（文字云）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。