1. 程式人生 > >Echarts詞雲圖自定義圖案

Echarts詞雲圖自定義圖案

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 key in keywords) { data.push({ name: key, value: Math.sqrt(keywords[key]) }) } var maskImage = new Image(); maskImage.src = 'img/timg17.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 }] }; var myChart = echarts.init(document.getElementById('main')); maskImage.onload = function() { myChart.setOption(option); }; window.onresize = function() { myChart.resize(); }