echarts字符云 笔记（一）

目前echarts3中的字符云问题并不能直接使用，当前在引入正常的 echarts.min.js 后，会报错如下：

Uncaught Error: Component series.wordCloud not exists. Load it first.
    at Function.t.getClass (echarts.min.js:11)
    at i.<anonymous> (echarts.min.js:25)
    at Array.forEach (<anonymous>)
    at f (echarts.min.js:1)
    at i.e (echarts.min.js:25)
    at Function.t.topologicalTravel (echarts.min.js:13)
    at i.mergeOption (echarts.min.js:25)
    at i.o (echarts.min.js:25)
    at i.resetOption (echarts.min.js:25)
    at i.setOption (echarts.min.js:25)

 

如要正常使用还需单独引入一个字符云文件 worldcloud.js

下载地址： https://pan.baidu.com/s/1VLzKyy4E1Cy_chK3vlsNPw

之后即可正常使用。

实战Demo：
下面操作 基于引入了相关的js文件（jquery-1.12.3.min.js,echarts.min.js,worldcloud.js）等文件。

$.post('你的url', {你的参数}, function (data) {
                var jsonList = data.data;
                if (jsonList.length == 0) {
                    ...
                    ...
                } else {
                   ...
                   ...

                    var option = {
//                                     backgroundColor: '#F7F7F7',
                        tooltip: {
                            trigger: 'item',
                            formatter: function (param) {
                                return param.name + ": " + param.value;
                            }
                        },

                        series: [{
                            name: '热门行业紧缺岗位',
                            type: 'wordCloud',
                            // size: ['5%', '99%'],
                            //当sizeRange 设置过大可能会引起 部分标签 无法显示
                            sizeRange: [10, 45],
//                                        textRotation: [0, 45, 90, -45],
                            rotationRange: [-30, 45, 90],
                            // shape: 'circle',
                            textPadding: 0,
                            autoSize: {
                                enable: true,
                                minSize: 10
                            },
                            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: jsonList
                        }]
                    };

                    var chart = echarts.init(document.getElementById('hotIndustryShortJobs'));
                    chart.setOption(option);

                    //鼠标移入事件
                    chart.on('mouseover', function (params) {
                        var result = params.data;
                        ...
                        ...
                    });
                }
            });