ecomfe / echarts-wordcloud Goto Github PK

View Code? Open in Web Editor NEW

1.6K 51.0 707.0 1.88 MB

Word Cloud extension based on Apache ECharts and wordcloud2.js

JavaScript 67.68% HTML 29.11% TypeScript 3.21%

echarts

echarts-wordcloud's Introduction

echarts-wordcloud

Third-party Wordcloud extension based on wordcloud2.js for Apache ECharts.

Examples

Google Trends

ECharts Option Keywords

Install

<script src="echarts.min.js"></script>
<script src="echarts-wordcloud.min.js"></script>

npm install echarts
npm install echarts-wordcloud

import * as echarts from 'echarts';
import 'echarts-wordcloud';

⚠️ NOTE:

echarts-wordcloud@2 is for echarts@5

echarts-wordcloud@1 is for echarts@4

Usage

var chart = echarts.init(document.getElementById('main'));

chart.setOption({
    ...
    series: [{
        type: 'wordCloud',

        // The shape of the "cloud" to draw. Can be any polar equation represented as a
        // callback function, or a keyword present. Available presents are circle (default),
        // cardioid (apple or heart shape curve, the most known polar equation), diamond (
        // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

        shape: 'circle',

        // Keep aspect ratio of maskImage or 1:1 for shapes
        // This option is supported since [email protected]
        keepAspect: false,

        // A silhouette image which the white area will be excluded from drawing texts.
        // The shape option will continue to apply as the shape of the cloud to grow.

        maskImage: maskImage,

        // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
        // Default to be put in the center and has 75% x 80% size.

        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,

        // Text size range which the value in data will be mapped to.
        // Default to have minimum 12px and maximum 60px size.

        sizeRange: [12, 60],

        // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

        rotationRange: [-90, 90],
        rotationStep: 45,

        // size of the grid in pixels for marking the availability of the canvas
        // the larger the grid size, the bigger the gap between words.

        gridSize: 8,

        // set to true to allow word to be drawn partly outside of the canvas.
        // Allow word bigger than the size of the canvas to be drawn
        // This option is supported since [email protected]
        drawOutOfBound: false,

        // if the font size is too large for the text to be displayed,
        // whether to shrink the text. If it is set to false, the text will
        // not be rendered. If it is set to true, the text will be shrinked.
        // This option is supported since [email protected]
        shrinkToFit: false,

        // If perform layout animation.
        // NOTE disable it will lead to UI blocking when there is lots of words.
        layoutAnimation: true,

        // Global text style
        textStyle: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            // Color can be a callback function or a color string
            color: function () {
                // Random color
                return 'rgb(' + [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                ].join(',') + ')';
            }
        },
        emphasis: {
            focus: 'self',

            textStyle: {
                textShadowBlur: 10,
                textShadowColor: '#333'
            }
        },

        // Data is an array. Each array item must have name and value property.
        data: [{
            name: 'Farrah Abraham',
            value: 366,
            // Style of single text
            textStyle: {
            }
        }]
    }]
});

Changelog

2.1.0

[chore] Update Apache ECharts version
[chore] Sync with the latest wordcloud2.js and use prettier to format the code
[feature] Add keepAspect option to keep aspect ratio of maskImage or 1:1 for shapes
[feature] Add drawOutOfBound option to allow words to be drawn partly outside of the canvas
[feature] Add shrinkToFit option to shrink the text if the font size is too large for the text to be displayed

Notice

The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.

echarts-wordcloud's People

Contributors

Stargazers

Watchers

Forkers

2betop ruanzx pylixm alpar loviselu xsls walk4muscle magic-coder shelleywu0427 lotuswpy daseinuxd lipengyu plusice jsding sys2007 gavin-ao xiaoxiaoshen af1ynch qq645475941 jeremyliu jinwoo-j storv guoyu07 huangshaoze stereof xingmengmeng okayaok roc-young ssshyu xpgeng lwllovejj rootics zwht raodinghui sighingnow peterwanng julysandz7728 ken-studio yalinthin zhechi wjh-18 junjiem yj7810520113 yuankl acupoflife cathyzuo jianjian0dandan itdavidhan xiaoqinsun guanxf northsmall idau2012 encn tanghaiyan fengdingbo nicky918 ecommerce888 ymm0008 kjin9 freeskyg erikyu mengqishen miaozd huangxiao233 joshlin00 jiajun-ma jianxq12 dut914project rknenuvis coralworm1105 vonlyinno jerrydai90 franksoong yjc930214 cmy00cindy 77598072 mingtao93 jianghang cangyeone wangxueliang liekkas3175 jeromehan 77ricky hansonhancheng xutaogit linxinkevin robinaqi paynehsu xiaoshine sxzhangmy kitter quitthink zhumuwenli anranwang jamkong zriowa dothin linzhuzhen daftscience saigsf

echarts-wordcloud's Issues

字符云在vue中使用getDataURL()和getConnectedDataURL()不能导出完整base64

字符云渲染不了主题的颜色么，只支持自定义颜色么？

var chart = echarts.init(document.getElementById('main'), 'dark');
chart.setOption(option);

背景被渲染了，而字符云中的字仍是默认的颜色，如何利用主题的颜色对字符云进行渲染？谢谢！

数据显示不完整

当图表面积不够时好像会隐藏掉较大的值？如下图1和图2只是调整了图表的大小，较大的值就显示不了了。。。有没有强制显示所有数据的选项可以设置

图1

图2

Listen to event when word cloud is drawn

Hi, I'm trying to figure out what words don't get drawn due to their size not fitting in the canvas. Is there a way to listen to the wordclouddrawn even and loop through the items to see which were drawn and which weren't?

不兼容echarts3.7.1完全版本的，会出现闪动效果

您好！我采用最新的echarts3.7.1完整版本的

{
    "series": [
        {
            "textStyle": {
                "normal": {
                    "color": "#999",
                    "textStyle": {
                        "fontFamily": "STHeiti",
                        "fontWeight": null
                    }
                }
            },
            "data": [
                {
                    "textStyle": {
                        "normal": {
                            "color": "rgb(122,122,182)",
                            "textStyle": {
                                "fontFamily": "STHeiti",
                                "fontWeight": null
                            }
                        }
                    },
                    "name": "燕金穆",
                    "value": 107
                },
                {
                    "textStyle": {
                        "normal": {
                            "color": "rgb(122,122,182)",
                            "textStyle": {
                                "fontFamily": "STHeiti",
                                "fontWeight": null
                            }
                        }
                    },
                    "name": "周高点",
                    "value": 106
                },
                {
                    "textStyle": {
                        "normal": {
                            "color": "rgb(122,122,182)",
                            "textStyle": {
                                "fontFamily": "STHeiti",
                                "fontWeight": null
                            }
                        }
                    },
                    "name": "周五因耶伦",
                    "value": 105
                },
                {
                    "textStyle": {
                        "normal": {
                            "color": "rgb(58,58,58)",
                            "textStyle": {
                                "fontFamily": "STHeiti",
                                "fontWeight": null
                            }
                        }
                    },
                    "name": "章彻一",
                    "value": 104
                },
                {
                    "textStyle": {
                        "normal": {
                            "color": "rgb(46,187,233)",
                            "textStyle": {
                                "fontFamily": "STHeiti",
                                "fontWeight": null
                            }
                        }
                    },
                    "name": "陈网升",
                    "value": 103
                },
                {
                    "textStyle": {
                        "normal": {
                            "color": "rgb(239,128,44)",
                            "textStyle": {
                                "fontFamily": "STHeiti",
                                "fontWeight": null
                            }
                        }
                    },
                    "name": "白银周",
                    "value": 102
                },
                {
                    "textStyle": {
                        "normal": {
                            "color": "rgb(232,127,125)",
                            "textStyle": {
                                "fontFamily": "STHeiti",
                                "fontWeight": null
                            }
                        }
                    },
                    "name": "周六凌",
                    "value": 101
                }
            ],
            "type": "wordCloud",
            "sizeRange": [
                20,
                40
            ],
            "rotationRange": [
                -90,
                0,
                0,
                90
            ],
            "rotationStep": 90,
            "gridSize": 30,
            "drawOutOfBound": false
        }
    ]
    
}

配置如上，但是当鼠标放置到上面元素的时候，会出现闪动
官方说可以采用echarts.min.js那个应该是完全版本的吧
简易版本的，没有出现这个问题
所以想问下，是兼容性问题，还是说是需要配置什么？？？

使用Echarts4 dataset 配置词云报错

Uncaught TypeError: Cannot read property 'getSource' of undefined
at List.listProto.initData (List.js:362)
at ExtendedClass.getInitialData (WordCloudSeries.js:18)
at ExtendedClass.init (Series.js:92)
at ExtendedClass. (Global.js:200)
at Array.forEach ()
at each (util.js:298)
at ExtendedClass.visitComponent (Global.js:174)
at Function.entity.topologicalTravel (component.js:86)
at ExtendedClass.mergeOption (Global.js:156)
at ExtendedClass.initBase (Global.js:615)
at ExtendedClass.resetOption (Global.js:103)
at ExtendedClass.setOption (Global.js:85)
at ECharts.echartsProto.setOption (echarts.js:351)
at ReEcharts.componentDidMount (ReEcharts.js:121)
at commitLifeCycles (react-dom.development.js:8770)
at commitAllLifeCycles (react-dom.development.js:9946)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at invokeGuardedCallback (react-dom.development.js:438)
at commitRoot (react-dom.development.js:10050)
at performWorkOnRoot (react-dom.development.js:11017)
at performWork (react-dom.development.js:10967)
at requestWork (react-dom.development.js:10878)
at scheduleWorkImpl (react-dom.development.js:10732)
at scheduleWork (react-dom.development.js:10689)
at scheduleTopLevelUpdate (react-dom.development.js:11193)
at Object.updateContainer (react-dom.development.js:11231)
at react-dom.development.js:15226
at Object.unbatchedUpdates (react-dom.development.js:11102)
at renderSubtreeIntoContainer (react-dom.development.js:15225)
at Object.render (react-dom.development.js:15290)
at render (index.js:126)
at Object.start (index.js:68)
at Object.defineProperty.value (index.js:12)
at webpack_require (bootstrap b56a8a71aca131827a5c:678)
at fn (bootstrap b56a8a71aca131827a5c:88)
at Object. (NotMatch.js:45)
at webpack_require (bootstrap b56a8a71aca131827a5c:678)
at bootstrap b56a8a71aca131827a5c:724
at bootstrap b56a8a71aca131827a5c:724

359 | */
360 |
361 |
362 | this.defaultDimValueGetter = defaultDimValueGetters[this._rawData.getSource().sourceFormat]; // Default dim value getter
363 |
364 | this._dimValueGetter = dimValueGetter = dimValueGetter || this.defaultDimValueGetter; // Reset raw extent.
365 |

{"legend":{},"tooltip":{},"dataset":{"source":[{"name":"Jayfee","value":666},{"name":"Nancy","value":520}]},"series":[{"type":"wordCloud","encode":{"itemName":"name","value":"value"}}]}

是否可以支持 dataset 配置词云

可否用edp安装

项目是edp部署的，dep里面已经有echarts和zrender，不想用npm install重复安装依赖

在绘制期间，如销毁图形，则导致浏览器比较卡

1.当数据量较大，绘制时间较长；
2.在绘制期间，调用图形的dispose方法进行销毁，则会出现问题；

具体调试结果如下：
当正在绘制时，sendEvent方法发送wordclouddrawn事件，该事件会将Text添加到Storage中去，调用storage.addToMap方法。在调用图形的dispose方法时，同时也会调用storege.dispose方法，而Storage会将自身存的对象清空，elements = null，如再调用addTomap方法时，则会this.elements[el.id] = el，这句会报错，因为elemets已经为null；

以上的错误会持续发生，而不会因为报错而终止；最终会导致浏览器比较卡，目前分析到这块。

数据量不够大时,图形效果完全出不来的

默认shape

hover 闪烁

移上去就变小用旧版本颜色还不好使

请问这如果是暗色背景，该如何取色？

backgroundColor : "rgb(51,51,51)",

然后取色都好奇怪。。

a.List is not a constructor

Uncaught TypeError: a.List is not a constructor
at r.getInitialData (echarts-wordcloud.min.js:1)
at r.init (echarts.min.js:10)
at r.n [as constructor] (echarts.min.js:10)
at r [as constructor] (echarts.min.js:11)
at new r (echarts.min.js:11)
at r. (echarts.min.js:23)
at p (echarts.min.js:1)
at r.e (echarts.min.js:23)
at Function.t.topologicalTravel (echarts.min.js:12)
at r.mergeOption (echarts.min.js:23)

我的配置:

var option2 = {
tooltip: {},
series: [ {
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'pentagon',
width: 600,
height: 400,
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: '#333'
}
},
data: [
{
name: 'Sam S Club',
value: 10000,
textStyle: {
normal: {
color: 'black'
},
emphasis: {
color: 'red'
}
}
},
{
name: 'Macys',
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
}
]
} ]
};

如何融入到ng-echart框架中？

使用版本1.1.1，字符重叠

如何在vue中使用？

部分词显示不完整

如上图所示，边缘的词显示不完整。
"echarts": "^3.6.2",
"echarts-wordcloud": "^1.1.0",

const option = {
          tooltip: {
            show: true,
          },
          grid: {
            top: 0,
            bottom: 0,
            left: 20,
            right: 20,
          },
          series: [{
            type: 'wordCloud',
            gridSize: 32,
            sizeRange: [24, 66],
            rotationRange: [0, 0],
            rotationStep: 90,
            textPadding: 0,
            width: '100%',
            height: '100%',
            drawOutOfBound: true,
            textStyle: {
              normal: {
                color: e => {
                  return CATEGORY_COLORS[e.data.category]
                },
                fontWeight: 900,
                fontFamily: 'Arial, Verdana, sans-serif',
              },
            },
            data: this.tempData,
          }],
        }

期望词能显示完整。

shape可以支持矩形吗

shape可以支持矩形吗？
目前的square和diamond一样都是菱形

怎样通过import命令引入

怎样通过import命令引入插件并使用？

在项目中使用的vue-echarts-v3，导入插件后提示wordCloud不存在

"shape" argument is not working

Hi, thanks for the great extension bringing word cloud back to ECharts 3!

I've tried to use different values for "shape" argument, like "circle", "triangle", "star", "pentagon", and "diamond". But seems that changing the "shape" argument doesn't make any different on the shape of the word cloud.

May you advise on this? Thanks!

希望能增加对angular2的支持

wordcloud2.js有专用的ts定义文件了，希望echarts-wordcloud也能写一份在typescript中能用的@types定义文件

不支持词云textStyle.normal.color,设置颜色

引用3.7.0版本的echarts，不支持词云textStyle.normal.color设置颜色

echarts引入echarts-wordcloud报错！！！！

  let myChart = document.getElementById('wordClouds')

      var maskImage = new Image();

      var treeUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAPYQAAD2EBqD+naQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAB9aSURBVHic7d1rk51lmTbg81m9Oh1CgqBAEiBREAFxM6OOu3F0xHGLigihiYowUSzqnama39C/waqxKkLSlmZX+WqVX/kXs6nRqWHUhDCOQAKa0N3reT+0DAay6c1a6342x/HJgtB9mqxeZ66r776fBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAkuRnh+7OkcP3lo4BTM6gdABgCobZn6qeLx0DmByFDn1QZz5V9peOAUyOQoeuO/HM+5Pcm+TuHFn8QOk4wGQodOi6UR75v/89M3rkCr8SaDGFDp1XvVHidR4tGASYIIUOXXbs6Q8mee+f/ZO7cuLQX5SKA0yOQocuq2feumIf1dbu0EEKHbqsqvdd4p867Q4dpNChq44u/mWSe976L6p35/gzH5p6HmCiFDp0VbVy+Ytk6solM9AxCh26qqou/73yKo+mrqsppgEmTKFDFx19+iOpc+dl/32d23Pi8EemmAiYMIUOXTS4xOn2N6uddocuUejQRfXoUqfb3/RrBvut3aE7FDp0zZHFjybVu6/666p6b44d+ugUEgFToNChawbrua99YO0OHaHQoUtWV+hrL+mqdtodOkKhQ5ccfebjSd61jv9iT44f/sSE0gBTpNChSwYbWKE77Q6doNChK1ZX5w+v+7+rqkeysOC9AFrOFzF0xYnFTyZ55wb+y9ty522fHHccYLoUOnTFZlbnG1nVA42i0KEL6rpKXT20iQ8wb+0O7eYLGLrg+OFPpar3buIj7M7d7/zU2PIAU6fQoRvG8DjU2iNVocUUOrTd6qp8/afb36yu9+XkyZnNBwJKUOjQdnft/XSSW8bwkXZl5eVPj+HjAAUodGi7cV4MUzvtDm2l0KHNFhYGqbKJ0+1v8UieXRiO8eMBU6LQoc3es+dvk+we40e8Kaf3fmaMHw+YEoUObTaYwD3s7naHVvLYRGirkydnsnzut0l2jvkj/y67f7079y0sj/njAhNkQoe2Wjn72Yy/zJPkxpza+9kJfFxgghQ6tFY1uYtgKpfMQNsodGijZxeGqfPgBD/DQzl4cHaCHx8YM4UObXRmz+eS3DzBz/CObJ/93AQ/PjBmCh3aaDSFk+iTOEEPTIxT7tA2zy4Mc3rPqSQ3TfYTVS9muH1X5udfm+znAcbBhA5tc/q2z2fiZZ4k9Q0Znfu7yX8eYBwUOrTOFO9bH8XaHVrCyh3a5ODB2ewYPp/k7VP6jC/l+ld35f5/ujClzwdskAkd2uS6mS9memWeJNfn99u/MMXPB2yQQoc2KfF4U6fdoRWs3KEtTp7ckuVXnk/qG6b8mc/mwmBnDhw4P+XPC6yDCR3aYvnslwqUeZJcl62jLxb4vMA6KHRoi7oqt/r2SFVoPCt3aINf/HAuL117JsnbCiU4l+GOnZmf/2Ohzw9chQkd2uDF7V9OuTJPkh2rK3+gqRQ6tEMDHmc6wce1Aptm5Q5Nt7i4NXOjM0muK5zklQx33GztDs1kQoem27J8f8qXeZJsz/K5+0uHAC5NoUPTVQUuk7kcp92hsazcocl+fnBbzg3PJNleOkqSpM4fsjJ7cx5//NXSUYCLmdChyV6ZvT9NKfMkqbItM69Zu0MDKXRosiauuAcN+hYA8H+s3KGpVtftLyS5tnSUi9T5Q2bP78z8P75SOgrwBhM6NNW54dfStDJPVtfuK9d8tXQM4GIKHZqryRe5NDkb9JKVOzTRT396bYZLZ9LECX3V+Yzmduaxx86WDgKsMqFDEw2XH0hzyzxJtmbm/NdKhwDeoNChkRp4uv3NSj7OFXgLK3domkOHduSanElyTekoV3Ehw+WdmX/q5dJBABM6NM/WPJDml3mSzGV59uulQwCrFDo0zaAF6/b/06as0G1W7tAkR45cl8GFM0m2lo6yRq+lvrAr3/mHF0sHgb4zoUOTVBceTHvKPEm2pNryQOkQgEKHZhmkhStsp92hCazcoSkWF6/P3Oj5JHOlo6zTUob1rsw/+fvSQaDPTOjQFFtGD6Z9ZZ4ks1kefKN0COg7hQ5NUbX4xHgTH/MKPWPlDk2wum4/k2RL6SgbtJSl4e488cT/lg4CfWVChybYuvJQ2lvmSTKb4fKDpUNAnyl0aIK66sLjSLvw/wFay8odSjv6oxtSzT2fdk/oSbKc5dlb8/jjL5QOAn1kQofSBnP70v4yT5JhZqzdoRSFDqV16TGkbT6pDy1n5Q4lHTt4YzI8nWRYOsqYrGR59hZrd5g+EzoUNfNwulPmSTKT2aWHSoeAPlLoUFKX1u2vq9t4Hz20n5U7lHLy8E1Zrk+lWxN6koyysnxbvvvU6dJBoE9M6FDKUvale2WeJIPMzHyzdAjoG4UOpVRdvoilExflQKtYuUMJJxd3ZXn0myQzpaNMyChV9uRb3z9VOgj0hQkdSlha2ZfulnmSDFLn4dIhoE8UOpRQdfB0+1u4ZAamycodpq376/bXjTIc7s38E78tHQT6wIQO07ZSz6f7ZZ4kgywt7SsdAvpCocO01T1aRQ/68K0FaAYrd5imI0/flsHgufTnL9N16vr2fOfJ50oHga7ry5sKNMPMzCPp19ddlapy2h2moE9vLFBen9btr+vFiX4oz8odpuX44T2p6+fSv6+7OtXgjnzrwH+VDgJdZkKHaanr+fSvzJOkSlacdocJU+gwPf1dPXfxMbHQMH2cFmD6+rtuf8Ng5s7s//tflY4BXWVCh2mo6/3pc5knyWjktDtMkEKH6fA4Ub8HMFH9nhhgGn769O0ZDn4VX2/JSv2efPfJX5aOAV1kQodJGw4ejTJfNdPjg4EwYQodJq1WYm9w2h0mxdQAk3T08B2paie7LzJ4b7594N9Kp4CuMaHDRNX7Sydontppd5gAhQ6TVPXw7var8nsCk2DlDpNy4sd3ZTTz76VjNNJgdG/2/+BfS8eALjGhw6TUAz93fTkrA3e7w5gpdJiUulLol1O5ZAbGzcodJuFnh+7OTJzkvpJR9b489r1/KR0DusKEDpMwjNPtV1PVpnQYI4UOk+BxoVdX5dHSEaBLFDqM27HFe5L6faVjtMA9OfHM+0uHgK5Q6DBu9ci6fa1GrsWFcVHoMG6Vklq7ytodxkShwzgdWfxAkntLx2iRu3Ps6Q+WDgFdoNBhnJzc3gA/rw/joNBhnKraDWjr58wBjIFCh3E5uviXSe4pHaN9qnfn+DMfKp0C2k6hw7gMRg7DbVTtICFslkKHcVFKm1A9mrp2FTVsgkKHcThx+MNJ3lM6RovdkWPPfLh0CGgzhQ7jMKpN55s1mPF7CJug0GEcqjjdvmn1vLU7bJxCh806svjR1LmzdIzWq3N7jh36aOkY0FYKHTbL6fYxGvi9hA1S6LB5D5cO0BlV7bQ7bJBCh804fvjjSe4oHaND9uToMx8vHQLaSKHDZtROt4/dwNodNkKhw0atroadbh8/p91hAxQ6bNTxw59I8s7SMTrotpxY/GTpENA2Ch02zmM/J6X2ewvrpdBhI+q6Sl09VDpGd9XzWVjw/gTr4AsGNuL44U+lqveWjtFhu3P3Oz9VOgS0iUKHjfBktcmrXdgD66HQYb0WFgapXCYzBY/k5MmZ0iGgLRQ6rNd7bvubJLeWjtEDu7L8yt+UDgFtodBhvVx8Mj0u7oE1U+iwHgsLg9S10+3TUmWftTusjUKH9bj71s8kuaV0jB7ZmaVznykdAtpAocO6VC48mT6/57AG7kuGtTp5cibL536bZGfpKD3zu+z+9e7ct7BcOgg0mQkd1mrl7GejzEu4Maf2frZ0CGg6hQ5rVTvdXszAaXe4Git3WIvVdfupJDeXjtJT1u5wFSZ0WIvllz8XZV7SjTmz53OlQ0CTKXRYE+v24kbW7nAlVu5wNc8uDHN6z6kkN5WO0m/Vixlu35X5+ddKJ4EmMqHD1Zy+7fNR5g1Q35DRub8rnQKaSqHDVVm3N8bIY2vhcqzc4UoOHpzNjuHzSd5eOgpJkpcy3LHT2h3eyoQOV7J9yxeizJvk+qyc/ULpENBECh2uZDCy4m0aF/zAJVm5w+VYtzfV2VwY7MyBA+dLB4EmMaHD5Vw7+6Uo8ya6LnMr1u7wJgodLqeqPbazufzZwJtYucOl/OKHc3np2jNJ3lY6Cpd07k+n3f9YOgg0hQkdLuXF7V+OMm+yHVk++6XSIaBJFDpcSuXe8MZz2h0uYuUOb7a4uDVzozNJrisdhSt6JcMdN1u7wyoTOrzZ1tFXoszbYHuWXv5K6RDQFAod3qx2X3hrVNbu8Dord/hz1u3tUucPWZm9OY8//mrpKFCaCR3+3Nzoq1Hm7VFlW2aXrd0hCh3ezIUl7ePPDGLlDm/4+cFtOTd8Icm1paOwDnX+kNnzOzP/j6+UjgIlmdDhdeeGX4syb58q27JyzVdLx4DSFDq8wYnptqpdBARW7pBYt7ff+Yzmduaxx86WDgKlmNAhSc7OPBBl3mZbM3jN2p1eU+iQJAMXlLSftTv9ZuUOJ/95e5a3vpDkmtJR2BRrd3rNhA4rcw9EmXfB1lQXvl46BJSi0MHFJN1R+bOkv6zc6bdDh3bkmryQZGvpKIzFhQyXd2b+qZdLB4FpM6HTb9vqB6PMu2QuS8NvlA4BJSh0+q12ur1zBi4Iop+s3OmvxcXrMzd6Pslc6SiM1VKG9a7MP/n70kFgmkzo9NfcyjeizLtoNkvVA6VDwLQpdHqssprtqsolM/SPlTv9tLpuP5NkS+koTMRSloa788QT/1s6CEyLCZ1+2rryUJR5l81muPxg6RAwTQqdfqqt2zuvctqdfrFyp3+O/uiGVHPPx4TedcsZVrdk/nv/UzoITIMJnf6ptj4cZd4Hw6zU1u70hkKnf2onoHvDt1boESt3+uXYwRuT4ekkw9JRmIqVLM/ekscff6F0EJg0Ezr9Us8+FGXeJzMZvvbN0iFgGhQ6PVN7vGbvVP7M6QUrd/rj5OGbslyfigm9b0ZZWb4t333qdOkgMEkmdPpjKfuizPtokJkZa3c6T6HTH+737jGPyaX7rNzph2NP70wGv00yUzoKRYxSZU++9f1TpYPApJjQ6YdqsC/KvM8GGdUPlQ4Bk6TQ6Yfavd69V7lkhm6zcqf7Ti7uyvLoNzGh990ow+HezD/x29JBYBJM6HTf8uiRKHOSQVZWHi4dAiZFodMHLhbhT1wsRHdZudNtPzu4OzPD38RfXllVZ7j8rsw/9d+lg8C4eZOj22aGj8brnDdUWZm1dqeTvNHRdU42czGPz6WjrNzpriNP35bB4L/jdc7F6tT17fnOk8+VDgLjZEKnuwaD+Shz3qpKVe0rHQLGTaHTXS4S4fK8Nugc0wvddPzwntT1c/Ea53IGM3dm/9//qnQMGBcTOt1U1/ujzLmS0chpdzpFodNN7m7nqpx2p1tMMHTPT5++PcPBr+L1zdWs1O/Jd5/8ZekYMA4mdLpnpnK6nbWZcdqd7lDodE81sEplbXxrhg4xxdAtRw/fkar+Zby2Wat6cFe+c+A/SseAzTKh0y3V6NEoc9ZlZEqnExQ6XePxmKxP5TVDN5hk6I4TP3l3RitOLLN+g9G92f+Dfy0dAzbDhE531MvfKh2BlloZOO1O6yl0uqN2dzsbVDntTvtZudMNPzt0d2byb6Vj0GKj6n157Hv/UjoGbJQJnW6YqR4tHYGWm3EVLO2m0OkIb8ZsUp39pSPAZih02u/Y4j1J3l86Bq13T479+H2lQ8BGKXTarx6ZrBiTgZ9Jp7UUOu3nhDJj4ywG7aXQabcjix9Icm/pGHTG3Tn29AdLh4CNUOi024x7uBmzesZrilZS6LRbHTd8MV5V7fvotJJCp71OHPqLJO8tHYPOuStHF/+ydAhYL4VOe4387DkTMvCtHNpHodNildUok+GSGVpIodNOx5/5UJL3lI5BZ92RE4c/XDoErIdCp51q0zkTVsdrjFZR6LRT5XQ7k1bPp649kZLWUOi0z/FDf5U6d5aOQcfVuT1Hf/JXpWPAWil02qd2up0pcdqdFlHotNHDpQPQG/ut3WkLhU67HH3mY0n17tIx6I09ObH4sdIhYC0UOi0zsAJlunyLh5ZQ6LRHXVepaqfbmTan3WkFhU57HD/8iSTvKh2D3tmTE4ufLB0Crkah0x5Wn5TitUcLKHTaoa6rZOB0O6U8moUF75c0mhco7XD00F+nqveWjkFv7c5de/66dAi4EoVOOwycbqewOl6DNJpCp/kWFgaJ0+0UVmU+J0/OlI4Bl6PQab673/mpJLeWjkHv7crS2U+VDgGXo9BpgdpjLGkIj+2luRQ6zbawMEhdP1Q6BiRZfWyvtTsNpdBptrtv/UySW0rHgD/ZmaVznykdAi5FodNstdPtNMzAJTM0k0KnuVYv8vhm6Rhwkbral2cXhqVjwJspdJrrrr2fTbK7dAx4k5vy/G1/WzoEvJlCp7ncn01T+VYQDeSRgDTTyZMzWT53KsnNpaPAJfwuu3+9O/ctLJcOAq8zodNMS6/cF2VOc92Y07feVzoE/DmFTjNVLpOh6VwyQ7NYudM8zy4Mc3rPqSQ3lY4Cl1e9mOH2XZmff610EkhM6DTRqb1/F2VO49U3ZPns50qngNcpdJrHxR20htPuNIeVO81y8OBsdgxPJ3lH6SiwBi9luGOntTtNYEKnWd42/HyUOe1xfZZe/XzpEJAodJpmFCtM2mUw8pqlEazcaY7VdfvzSd5eOgqsw0u5/tVduf+fLpQOQr+Z0GmOa2e/FGVO+1yfl7Z9sXQIUOg0h9PttFVdee1SnJU7zfCLH87lpWvPJHlb6SiwAedyYXBzDhw4XzoI/WVCpxlevvZLUea0145sqb9UOgT9ptBpBo9Kpe0qr2HKsnKnPOt2uuHcny6Z+WPpIPSTCZ3yXtr2lShz2m9HVs59uXQI+kuh0wAeQ0lH1PFaphgrd8paXNyaudGZJNeVjgKbVucPWZm9OY8//mrpKPSPCZ2y5kZfjTKnK6psy+zyV0rHoJ8UOmU53U7XeE1TiJU75fz84LacG55Jsr10FBgba3cKMaFTztmZr0aZ0zVVtmW49NXSMegfhU45g4HVJF3ltc3UWblTxuq6/YUk15aOAhNwPn/Mzfn+98+VDkJ/mNAp45XZr0eZ011bs7W2dmeqFDqluICDbqtcmMR0WbkzfSf/eXuWt76Q5JrSUWCCzmc0tzOPPXa2dBD6wYTO9K3MPRBlTvdtTXXh66VD0B8KnemrKyeA6YeBS2aYHit3puvQoR25JmdiQqcfLmS4vDPzT71cOgjdZ0Jnuq6pvhFlTn/MZWXmgdIh6AeFzpRZQdIztQuUmA4rd6bnyJHrMrhwJsnW0lFgil7LsN6d+Sd/XzoI3WZCZ3oG578ZZU7/bMlSZe3OxCl0psjpdnqq8q0mJs/KnelYXLw+c6MzSbaUjgIFLGVY77J2Z5JM6EzHXP3NKHP6azYrebB0CLpNoTMdtZUjPedCJSbMyp3JO/qjG1LNPR8TOv22nGF1S+a/9z+lg9BNJnSmYO6hKHMYZjnfKB2C7lLoTIPHSMIqXwtMjJU7k3Xs4I3J8HSSYeko0AArWZ69JY8//kLpIHSPCZ3JqmcfijKH181k+No3S4egmxQ6k+VCDbiY0+5MiJU7k2PdDpeykoxuzbd/cKZ0ELrFhM7kVMN9UebwZjOpZx4qHYLuUehMTh2rRbgU34piAqzcmYyTh2/Kcn0qJnS4lFGq7Mm3vn+qdBC6w4TOZCyPHokyh8sZJHHanbFS6ExI5QINuJLaJTOMl5U743dycVeWR79JMlM6CjTYKMPh3sw/8dvSQegGEzrjt7puV+ZwZYOsrDxcOgTdodCZACd4YU08VpgxsnJnvH52cHdmhr+JvyzCWtQZLr8r80/9d+kgtJ83XcZrMDMfrytYqyrLQ5fMMBbeeBmvgXuqYZ18zTAWVu6Mz5Gnb8tg8Fz8RRHWo05d357vPPlc6SC0mzdexmcwsG6H9atSVftKh6D9vPkyPpV1O2yQrx02zcqd8Th+eE/q+rl4TcFG1KkGd+RbB/6rdBDay4TOmIwejTKHjapSj0zpbIpCZzxq63bYFI8bZpNMVGze8cV3pR79Z7yeYHMGM3dm/9//qnQM2smEzubV9XyUOWzeyrLT7myYQmccPAYSxsJjh9k4UxWbc/TwHanqX8ZrCcajHtyV7xz4j9IxaB8TOptTOd0O4+W0Oxuj0Nkkp9thrCqPVGVjTFZs3ImfvDujlV+WjgHdM3hvvn3g30qnoF1M6GzcaLS/dATopGrFaXfWTaGzCVaDMBEuamIDrNzZmBM/viujmX8vHQM6azC6N/t/8K+lY9AeJnQ2ZmXm0dIRoNNGM6Z01kWhszGVy2RgsupvlU5Auyh01u/Y4j1J3l86BnTcPTn24/eVDkF7KHTWr3a6HaaitnZn7RQ661d5zCNMRRV/eWbNFDrrc+KZ9ye5t3QM6Im7c2TxA6VD0A4KnfUZmc5hqmbc7c7aKHTWyYUXMFV1/Igoa6LQWbtjT38wyXtLx4CeuSsnDv1F6RA0n0JnHSo/ew4l1O594OoUOutQPVw6AfRS7bQ7V6fQWZvjz3woyT2lY0BP3ZEThz9cOgTNptBZm9rpdihq5OmGXJlCZ20qp9uhqCqPpq49IZPLUuhc3dGnP5I6d5aOAb1W5/acOPyR0jFoLoXO1Q3cJw2NUFu7c3kKnaurR/tKRwCS1IP91u5cjkLnyo4+87GkenfpGECSqt6bE4sfKx2DZlLoXMXAig+axNqdy1DoXF5dV6lq63Zolnlrdy5FoXN5R5/5eJJ3lY4BXGRPjh/+ROkQNI9C5/IG1u3QSNbuXIJC59JWV3rubocmqqpHsrDg/ZuLeEFwaScWP5nknaVjAJd0W+687ZOlQ9AsCp1L87hGaLbK44y5mELnreq6SuqHSscArqDKfE6enCkdg+ZQ6LzViZ/8TZI9pWMAV7QrS2c/VToEzaHQeat65AQttIGfROHPKHQutnpy1ul2aIO63mftzusUOhe7a++nk9xSOgawJruy8vKnS4egGRQ6F3NhBbRLbe3OKoXOGxYWBqnidDu0yyN5dmFYOgTlKXTe8J49f5tkd+kYwLrclNN7P1M6BOUpdP6ciyqgnXztEo/gY9XJkzNZPncqyc2lowDr9rvs/vXu3LewXDoI5ZjQWbX0yn1R5tBWN+b0rfeVDkFZCp1VA6fbod2cdu87hU7y7MIwdR4sHQPYlIdy8OBs6RCUo9BJzuz5XKzboe3eke2znysdgnIUOsnIuh06wbfOes0p9747eHA2O4ank7yjdBRgs6oXM9y+K/Pzr5VOwvSZ0PvubcPPR5lDR9Q3ZOnVz5dOQRkKve9GsaKDLhl4/HFfWbn32eq6/fkkby8dBRibl3L9q7ty/z9dKB2E6TKh99l1M1+MMoeuuT6/3/6F0iGYPoXeZx67CN3ktHsvWbn31cmTW7L8yvNJfUPpKMDYnc2Fwc4cOHC+dBCmx4TeV8tnv6TMobOuy9bRF0uHYLoUen953CJ0We1rvG+s3PvoFz+cy0vXnknyttJRgIk5l+GOnZmf/2PpIEyHCb2PXtr2lShz6LodWTn35dIhmB6F3kdOt0M/1C6O6hMr975ZXNyaudGZJNeVjgJM3KtZnt2Zxx9/tXQQJs+E3jdblu+PMoe+uDbDJWv3nlDofVNZt0Ov1C6Z6Qsr9z75+cFtOTc8k2R76SjAlNT5Q1Zmb7Z27z4Tep+8Mnt/lDn0S5VtmXnt/tIxmDyF3i8umoA+qipf+z1g5d4Xq+v2F5JcWzoKMGV1/pDZ8zsz/4+vlI7C5JjQ++KV2a9HmUM/VdmWpbmvlY7BZCn0vnDSFfpt4Cdcus7KvQ9++tNrM1w6ExM69Nn5jOZ25rHHzpYOwmSY0PtguPxAlDn03dbMnLd27zCF3gvW7UCSuvJe0GFW7l136NCOXJMzSa4pHQUo7kKGyzsz/9TLpYMwfib0rrum+kaUObBqLiszD5QOwWQo9M6zbgf+jMcnd5aVe5cdOXJdBhfOJNlaOgrQGK+lvrAr3/mHF0sHYbxM6F1WXXgwyhy42JZUW6zdO0ihd9kgVmvAJTjt3kVW7l21uHh95kbPJ5krHQVonKUM612Zf/L3pYMwPib0rtoyejDKHLi02SwPvlE6BOOl0LvL4xKBK6i9R3SMlXsXHf3RDanmnk+ypXQUoLGWsjTcnSee+N/SQRgPhQ6TdvLkliyfu1A6RiNcGFyTAwfOl44BXWTlDgAdoNABoAMUOgB0gEIHgA5Q6ADQAQodADpAoQNAByh0AOgAhQ4AHaDQAaADFDoAdIBCB4AOUOgA0AEKHQA6QKEDQAcodADoAIUOAB2g0AGgAxQ6AHSAQgeADlDoANABCh0AOkChA0AHKHQA6ACFDgAdoNABoAMUOgB0gEIHgA5Q6ADQAQodADpAoQNAByh0AOgAhQ4AHaDQAaADFDoAdIBCB4AOUOgA0AEKHQA6QKEDQAcodADoAIUOAB2g0AGgAxQ6AHSAQgeADlDoANABCh0AOkChA0AHKHQA6ACFDgAdoNABoAMUOgB0gEIHgA5Q6ADQAQodADpAoQNAByh0AOgAhQ4AHaDQAaADFDoAdEBVOgD0wtEf3VA6QiN8+/+9lKqqS8cAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgHX6/xN0n4+hh/6iAAAAAElFTkSuQmCC";

      var starUrl = "data:image/png;base64,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";

      var presents = ['圣诞树', '贺卡', '圣诞礼盒', '围巾', '袜子', '苹果', '手链', '巧克力', '玫瑰', '香水', '乐高', '芭比', '项链', '抱枕', '变形金刚', '摆件', '魔方', '文具', '棒棒糖', '蓝牙耳帽', '超级飞侠', '暖手宝', '夜灯', '堆袜', '耳钉', '公仔', '手机壳', '八音盒', '剃须刀', '打火机', '手表', '巴克球', '模型', '音响', '蒙奇奇', '保温杯']

      var data = [];
      for (var i = 0; i < presents.length; ++i) {
        data.push({
          name: presents[i],
          value: (presents.length - i) * 20
        });
      }
      for (var i = 10; i < presents.length; ++i) {
        var cnt = Math.floor(Math.random() * 10);
        for (var j = 0; j < cnt; ++j) {
          data.push({
            name: presents[i],
            value: Math.random() * 10
          });
        }
      }

      var maskImage = new Image();
      maskImage.onload = function () {
        myChart.setOption({
          tooltip: {
            show: false
          },
          series: [{
            type: 'wordCloud',
            gridSize: 1,
            sizeRange: [10, 35],
            rotationRange: [0, 90],
            rotationStep: 90,
            maskImage: maskImage,
            textStyle: {
              normal: {
                color: function (v) {
                  if (v.value > 600) {
                    return 'rgb(0, 116, 111)';
                  } else if (v.value > 200) {
                    return 'rgb(0, 156, 147)';
                  } else if (v.value > 9) {
                    return 'rgb(70, 209, 133)';
                  } else {
                    return 'rgb(20, 186, 167)';
                  }
                }
              }
            },
            width: 600,
            height: 500,
            top: 40,
            data: data
          }],
          graphic: {
            elements: [{
              type: 'image',
              style: {
                image: starUrl,
                width: 40,
                height: 40
              },
              left: 'center',
              top: 40
            }]
          }
        });
      };
    }
  }

报错：
echarts-wordcloud.js?a994:2492 Uncaught TypeError: Cannot read property 'extendSeriesModel' of undefined
at Object.eval (echarts-wordcloud.js?a994:2492)
at webpack_require (echarts-wordcloud.js?a994:30)
at Object.eval (echarts-wordcloud.js?a994:991)
at webpack_require (echarts-wordcloud.js?a994:30)
at Object.eval (echarts-wordcloud.js?a994:982)
at webpack_require (echarts-wordcloud.js?a994:30)
at BUILTIN_OBJECT.[object Function] (echarts-wordcloud.js?a994:73)
at eval (echarts-wordcloud.js?a994:74)
at webpackUniversalModuleDefinition (echarts-wordcloud.js?a994:2)
at Object.eval (echarts-wordcloud.js?a994:10)

样式渲染问题

偶尔会出现如下所示的渲染效果，没找到稳定复现的方式。。

词显示重叠

"echarts": "^3.6.2",
"echarts-wordcloud": "^1.1.0",

const option = {
tooltip: {
show: true,
},
series: [{
type: 'wordCloud',
gridSize: 32,
sizeRange: [24, 66],
rotationRange: [0, 0],
rotationStep: 90,
textPadding: 0,
left: 'center',
top: 'center',
width: '70%',
height: '80%',
right: null,
bottom: null,
drawOutOfBound: true,
textStyle: {
normal: {
color: e => {
return CATEGORY_COLORS[e.data.category]
},
fontWeight: 900,
fontFamily: 'Arial, Verdana, sans-serif',
},
},
data: this.tempData,
}],
}

容器大小 1090*514

增加hover效果

目前hover的效果只有增加文字阴影以及统一的颜色，是否还有其它的效果，比如说，字体自动变大

是否支持drawOutOfBound

是否支持wordcloud2的drawOutOfBound配置。
目前使用样例配置后，发现有些文字太长太大导致并不能显示出来

Component series.wordCloud not exists. Load it first

你好！我想问一下我在vue2的项目中想引用echarts-wordcloud可为什么会报这个错误
Component series.wordCloud not exists. Load it first
我已经引入了echarts和echarts-wordcloud了（是我引入的方式不对吗）
import echarts from 'echarts'
import 'echarts-wordcloud'
其他代码我是按照github上的例子写的
另外我的echarts的版本是3.7.0

文字被覆盖

如上图，口语标签被放到了广告下面，永远点击不到。。

echarts-cloud结合vue-echarts-v3使用，报[Vue warn]: Error in mounted hook: "Error: Component series.wordCloud not exists. Load it first."

hover 闪烁，体验不好

echarts： 3.7.0
wordcloud： 1.1.1
鼠标hover的时候，从一个词移到另一个词的时候，当前的词会一直闪烁，体验不好。另外，还有词重叠的情况出现，还有一个问题，不知道是不是bug，中间这块的分布不是很均匀，最大的词上方有块空白。

const option = {
          tooltip: {
            show: true,
          },
          series: [{
            type: 'wordCloud',
            gridSize: 22,
            sizeRange: [14, 50],
            rotationRange: [0, 0],
            left: null,
            top: null,
            width: '100%',
            height: '100%',
            right: null,
            bottom: null,
            drawOutOfBound: true,
            textStyle: {
              normal: {
                color: e => {
                  return CATEGORY_COLORS[e.data.category]
                },
                fontWeight: 900,
                fontFamily: 'Arial, Verdana, sans-serif',
              },
            },
            data: this.tempData,
          }],
        }

是否有属性可以支持透明度

现在可以改文字颜色，文字阴影，请问有API支持改文字透明度吗？

请问可以在echarts3里工作吗？

echarts3的文档里没有包括字符云，请问与echarts3版本兼容吗？非常感谢！

使用echart的setOption进行重绘，重绘图和原图重合

已经设置setOption函数的notMerge参数为true

IE11 Supporting

Sorry, I posted it to the wrong repository !

webpack打包体积优化

根据按需引入 ECharts 图表和组件的描述, Echarts可以按需引入sub-modules来减小打包体积。
所以对于wordcloud，如何实现按需引入？

请问本产品的License是什么类型？

感谢作者为我们提供如此优秀的Echarts扩展。只是有个问题，如果想使用这个插件，请问是否需要付费？本插件的License是什么类型？

每个节点添加一个href属性或者事件

how to enable click event on words

Hi,

is the click event supported by this plugin? if it's supported how to enable

thanks

用Chrome瀏覽器無法執行example

Chrome端Console報錯: (example: optionKeywords.html opened by Chrome)

Invalid mask image
SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

火狐 IE 浏览器不兼容问题

火狐截图

谷歌截图

React项目非Chrome浏览器词云出不来是什么原因？

问题出现在Safari浏览器中，在官方的词云example(https://ecomfe.github.io/echarts-wordcloud/example/optionKeywords.html)中，词云实例渲染出来的dom结构是这样的：

而在我的项目中，词云实例渲染出的dom结构为：

对比可以看出，在"echarts_instance"div下的那个div中，后者比前者少了canvas标签，这是为何？我的maskImage属性使用的是base64编码的Image，如果maskImage设为null则可以正常展示，哪位知道这是什么原因？

结合vue-echarts报错

请问能否在 echart 2.2.2中使用，IE 8的兼容情况如何？

在echart2.2.3中好像包含有字符云，但是ie8的兼容不好。请问此插件可以用在echart 2.2.2版本吗？ie8兼容情况如何？

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

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,
};