react 项目使用 echarts-wordcloud（文字云）

Z时代
2024-01-10
分类：综合

react

一、安装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\',
            width: \'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);
    };
}