2.1.0 • Published 3 years ago

echarts-wordcloud v2.1.0

Weekly downloads
8,726
License
ISC
Repository
github
Last release
3 years ago

echarts-wordcloud

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

npm.io

Examples

Google Trends

ECharts Option Keywords

Install

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

Or

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 from echarts-wordcloud@2.1.0
        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 being draw partly outside of the canvas.
        // Allow word bigger than the size of the canvas to be drawn
        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.
        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: {
            }
        }]
    }]
});
cchartssop-cdmdata-slides@jasonjohn/chartcomponents@chofn/vue-echarts-wordcloudtong-zui-uimdt-libdmd-componentqnlcdpsohelp-testtandroid-echarts@infinitebrahmanuniverse/nolb-echjswl-lowcode-screen@everything-registry/sub-chunk-1551datav-amist-bi-lsd-toolt3-bi-lsd-toolt4-bi-lsd-toolt2-bi-lsd-toolt13-bi-lsd-toolt14-bi-lsd-toolt10-bi-lsd-toolt11-bi-lsd-toolt12-bi-lsd-toolt6-bi-lsd-toolt8-bi-lsd-toolt9-bi-lsd-toolt7-bi-lsd-toolt5-bi-lsd-toolt1-bi-lsd-tooltest-chart-toolwioc-materials-h5wioc-materials-lsdwinning-schedulewinning-securitywinning-developwjyyds-echartswindmill-uivue-geowdc-chartswdc-charts-vuevue-i-componentswpm-uiwp-chartsx-echartswh-webxm-chartsxm-charts-reactxing-viewxm-react-chartsxg-zw-uiteamcosthj-uivisual-screen-designv-chartsv-charts-aiv-charts-hv-charts-multiple-yv-charts-xv-charts-x-dmv-charts-zyzhouvue-echarts-wvue-element-plus-adminvue-element-plus-admin-liang-testvue-element-plus-admin-yl@dpdfe/wcharts@cyber-insight/cps-ui@cyberinsight/cps-ui@covalent/echartsfancy-toolsith-ui-viewjrx-bi-report-enginejpaas-amisips-visual-bocoui-testiset-chartjupyter-echartslb-chartswise-light-libraryrejst-mentalsword-testing01omi-dataraheel-compsty-customizationtivvue-pandora@anov/ui@beisen-oneops/amis@axux/charts@bframe/b-vue-chart@chief-editor/brick-chart@chipunderblade/amis@acegroup/cli-templates-vue3-element-admin@dewfall/wordcloud@dft-vue-2-opentiny/vue-chart-wordcloud@dftvue2-opentiny/vue-chart-wordcloud@datagrok/charts@datlas/mdt-libylcr-templateyh-amisszc-vue-demoxw-dashboard-mobile
2.1.0

3 years ago

2.1.0-beta

3 years ago

2.0.0

4 years ago

1.1.3

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.3

9 years ago

1.0.2

9 years ago

1.0.1

9 years ago

1.0.0

9 years ago