词云图echarts /asset/get/s/data-1500255880404-H1gqIqYrZ.png'; var option = { title: { text: '搜索指数配置项内容和展示

心型词云图

配置项如下
      var keywords = {
    "visualMap": 22199,
    "continuous": 10288,
    "contoller": 620,
    "series": 274470,
    "gauge": 12311,
    "detail": 1206,
    "piecewise": 4885,
    "textStyle": 32294,
    "markPoint": 18574,
    "pie": 38929,
    "roseType": 969,
    "label": 37517,
    "emphasis": 12053,
    "yAxis": 57299,
    "name": 15418,
    "type": 22905,
    "gridIndex": 5146,
    "normal": 49487,
    "itemStyle": 33837,
    "min": 4500,
    "silent": 5744,
    "animation": 4840,
    "offsetCenter": 232,
    "inverse": 3706,
    "borderColor": 4812,
    "markLine": 16578,
    "line": 76970,
    "radiusAxis": 6704,
    "radar": 15964,
    "data": 60679,
    "dataZoom": 24347,
    "tooltip": 43420,
    "toolbox": 25222,
    "geo": 16904,
    "parallelAxis": 4029,
    "parallel": 5319,
    "max": 3393,
    "bar": 43066,
    "heatmap": 3110,
    "map": 20285,
    "animationDuration": 3425,
    "animationDelay": 2431,
    "splitNumber": 5175,
    "axisLine": 12738,
    "lineStyle": 19601,
    "splitLine": 7133,
    "axisTick": 8831,
    "axisLabel": 17516,
    "pointer": 590,
    "color": 23426,
    "title": 38497,
    "formatter": 15214,
    "slider": 7236,
    "legend": 66514,
    "grid": 28516,
    "smooth": 1295,
    "smoothMonotone": 696,
    "sampling": 757,
    "feature": 12815,
    "saveAsImage": 2616,
    "polar": 6279,
    "calculable": 879,
    "backgroundColor": 9419,
    "excludeComponents": 130,
    "show": 20620,
    "text": 2592,
    "icon": 2782,
    "dimension": 478,
    "inRange": 1060,
    "animationEasing": 2983,
    "animationDurationUpdate": 2259,
    "animationDelayUpdate": 2236,
    "animationEasingUpdate": 2213,
    "xAxis": 89459,
    "angleAxis": 5469,
    "showTitle": 484,
    "dataView": 2754,
    "restore": 932,
    "timeline": 10104,
    "range": 477,
    "value": 5732,
    "precision": 878,
    "target": 1433,
    "zlevel": 5361,
    "symbol": 8718,
    "interval": 7964,
    "symbolSize": 5300,
    "showSymbol": 1247,
    "inside": 8913,
    "xAxisIndex": 3843,
    "orient": 4205,
    "boundaryGap": 5073,
    "nameGap": 4896,
    "zoomLock": 571,
    "hoverAnimation": 2307,
    "legendHoverLink": 3553,
    "stack": 2907,
    "throttle": 466,
    "connectNulls": 897,
    "clipOverflow": 826,
    "startValue": 551,
    "minInterval": 3292,
    "opacity": 3097,
    "splitArea": 4775,
    "filterMode": 635,
    "end": 409,
    "left": 6475,
    "funnel": 2238,
    "lines": 6403,
    "baseline": 431,
    "align": 2608,
    "coord": 897,
    "nameTextStyle": 7477,
    "width": 4338,
    "shadowBlur": 4493,
    "effect": 929,
    "period": 225,
    "areaColor": 631,
    "borderWidth": 3654,
    "nameLocation": 4418,
    "position": 11723,
    "containLabel": 1701,
    "scatter": 10718,
    "areaStyle": 5310,
    "scale": 3859,
    "pieces": 414,
    "categories": 1000,
    "selectedMode": 3825,
    "itemSymbol": 273,
    "effectScatter": 7147,
    "fontStyle": 3376,
    "fontSize": 3386,
    "margin": 1034,
    "iconStyle": 2257,
    "link": 1366,
    "axisPointer": 5245,
    "showDelay": 896,
    "graph": 22194,
    "subtext": 1442,
    "selected": 2881,
    "barCategoryGap": 827,
    "barGap": 1094,
    "barWidth": 1521,
    "coordinateSystem": 3622,
    "barBorderRadius": 284,
    "z": 4014,
    "polarIndex": 1456,
    "shadowOffsetX": 3046,
    "shadowColor": 3771,
    "shadowOffsetY": 2475,
    "height": 1988,
    "barMinHeight": 575,
    "lang": 131,
    "symbolRotate": 2752,
    "symbolOffset": 2549,
    "showAllSymbol": 942,
    "transitionDuration": 993,
    "bottom": 3724,
    "fillerColor": 229,
    "nameMap": 1249,
    "barMaxWidth": 747,
    "radius": 2103,
    "center": 2425,
    "magicType": 3276,
    "labelPrecision": 248,
    "option": 654,
    "seriesIndex": 935,
    "controlPosition": 121,
    "itemGap": 3188,
    "padding": 3481,
    "shadowStyle": 347,
    "boxplot": 1394,
    "labelFormatter": 264,
    "realtime": 631,
    "dataBackgroundColor": 239,
    "showDetail": 247,
    "showDataShadow": 217,
    "x": 684,
    "valueDim": 499,
    "onZero": 931,
    "right": 3255,
    "clockwise": 1035,
    "itemWidth": 1732,
    "trigger": 3840,
    "axis": 379,
    "selectedOffset": 670,
    "startAngle": 1293,
    "minAngle": 590,
    "top": 4637,
    "avoidLabelOverlap": 870,
    "labelLine": 3785,
    "sankey": 2933,
    "endAngle": 213,
    "start": 779,
    "roam": 1738,
    "fontWeight": 2828,
    "fontFamily": 2490,
    "subtextStyle": 2066,
    "indicator": 853,
    "sublink": 708,
    "zoom": 1038,
    "subtarget": 659,
    "length": 1060,
    "itemSize": 505,
    "controlStyle": 452,
    "yAxisIndex": 2529,
    "edgeLabel": 1188,
    "radiusAxisIndex": 354,
    "scaleLimit": 1313,
    "geoIndex": 535,
    "regions": 1892,
    "itemHeight": 1290,
    "nodes": 644,
    "candlestick": 3166,
    "crossStyle": 466,
    "edges": 369,
    "links": 3277,
    "layout": 846,
    "barBorderColor": 721,
    "barBorderWidth": 498,
    "treemap": 3865,
    "y": 367,
    "valueIndex": 704,
    "showLegendSymbol": 482,
    "mapValueCalculation": 492,
    "optionToContent": 264,
    "handleColor": 187,
    "handleSize": 271,
    "showContent": 1853,
    "angleAxisIndex": 406,
    "endValue": 327,
    "triggerOn": 1720,
    "contentToOption": 169,
    "buttonColor": 71,
    "rotate": 1144,
    "hoverLink": 335,
    "outOfRange": 491,
    "textareaColor": 58,
    "textareaBorderColor": 58,
    "textColor": 60,
    "buttonTextColor": 66,
    "category": 336,
    "hideDelay": 786,
    "alwaysShowContent": 1267,
    "extraCssText": 901,
    "effectType": 277,
    "force": 1820,
    "rippleEffect": 723,
    "edgeSymbolSize": 329,
    "showEffectOn": 271,
    "gravity": 199,
    "edgeLength": 193,
    "layoutAnimation": 152,
    "length2": 169,
    "enterable": 957,
    "dim": 83,
    "readOnly": 143,
    "levels": 444,
    "textGap": 256,
    "pixelRatio": 84,
    "nodeScaleRatio": 232,
    "draggable": 249,
    "brushType": 158,
    "radarIndex": 152,
    "large": 182,
    "edgeSymbol": 675,
    "largeThreshold": 132,
    "leafDepth": 73,
    "childrenVisibleMin": 73,
    "minSize": 35,
    "maxSize": 35,
    "sort": 90,
    "funnelAlign": 61,
    "source": 336,
    "nodeClick": 200,
    "curveness": 350,
    "areaSelectStyle": 104,
    "parallelIndex": 52,
    "initLayout": 359,
    "trailLength": 116,
    "boxWidth": 20,
    "back": 53,
    "rewind": 110,
    "zoomToNodeRatio": 80,
    "squareRatio": 60,
    "parallelAxisDefault": 358,
    "checkpointStyle": 440,
    "nodeWidth": 49,
    "color0": 62,
    "layoutIterations": 56,
    "nodeGap": 54,
    "color(Array": 76,
    "<string>)": 76,
    "repulsion": 276,
    "tiled": 105,
    "currentIndex": 145,
    "axisType": 227,
    "loop": 97,
    "playInterval": 112,
    "borderColor0": 23,
    "gap": 43,
    "autoPlay": 123,
    "showPlayBtn": 25,
    "breadcrumb": 119,
    "colorMappingBy": 85,
    "id": 18,
    "blurSize": 85,
    "minOpacity": 50,
    "maxOpacity": 54,
    "prevIcon": 12,
    "children": 21,
    "shape": 98,
    "nextIcon": 12,
    "showNextBtn": 17,
    "stopIcon": 21,
    "visibleMin": 83,
    "visualDimension": 97,
    "colorSaturation": 56,
    "colorAlpha": 66,
    "emptyItemWidth": 10,
    "inactiveOpacity": 4,
    "activeOpacity": 4,
    "showPrevBtn": 19,
    "playIcon": 26,
    "ellipsis": 19,
    "gapWidth": 19,
    "borderColorSaturation": 10,
    "handleIcon": 2,
    "handleStyle": 6,
    "borderType": 1,
    "constantSpeed": 1,
    "polyline": 2,
    "blendMode": 1,
    "dataBackground": 1,
    "textAlign": 1,
    "textBaseline": 1,
    "brush": 3
};
var data = [];
for (var name in keywords) {
    data.push({
        name: name,
        value: Math.sqrt(keywords[name])
    })
}
var maskImage = new Image();
maskImage.src = '/asset/get/s/data-1500255880404-H1gqIqYrZ.png';
var option = {
    title: {
        text: '搜索指数',
        x: 'center',
        textStyle: {
            fontSize: 23
        }

    },
    backgroundColor: '#F7F7F7',
    series: [{
        name: '搜索指数',
        type: 'wordCloud',
        //size: ['9%', '99%'],
        sizeRange: [12, 80],
        //textRotation: [0, 45, 90, -45],
        rotationRange: [-45, 90],
        //shape: 'circle',
        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: '#333'
            }
        },
        data: data
    }]
};
maskImage.onload = function() {
    myChart.setOption(option);
};
window.onresize = function() {
    myChart.resize();
}
    
截图如下