ECharts的词云图wordCloud

之前查了很久,原来这个东西名词叫做词云图

11.jpg

很多人都在echar官网查了很久,貌似没有这个type类型的,我在社区里面找到了有这种图,但是打开了却看不了,不知道为什么,百度了

这里修改之前的词云图链接，原来的版本低了出现了不显示颜色问题，
https://github.com/ecomfe/echarts-wordcloud
这是github的词云图链接，解压后引入dis文件里面的min.js文件

话不多说开始码
首先你需要引入echars.js文件,
然后引入这个词云图的js文件

<script type="text/javascript" src="./js/echarts.js"></script>
<script src="./js/echarts-wordcloud.min.js"></script>
<script src="./js/test.js"></script>

我只运用到了部分属性就出来了这个图,可以百度找需要的属性

  var JosnList = [
            {name: "龙头镇", value: "111"},
            {name: "大埔镇", value: "222"},
            {name: "太平镇", value: "458"},
            {name: "沙埔镇", value: "445"},
            {name: "东泉镇", value: "456"},
            {name: "凤山镇", value: "647"},
            {name: "六塘镇", value: "189"},
            {name: "冲脉镇", value: "864"},
            {name: "寨隆镇", value: "652"},
        ];
        var optionFour = {
            tooltip: {
                show: true
            },
            series: [{
                name: '项目分析',
                type: 'wordCloud',
                sizeRange: [10, 50],//文字范围
                //文本旋转范围，文本将通过rotationStep45在[-90,90]范围内随机旋转
                rotationRange: [-45, 90],
                rotationStep: 45,
                textRotation: [0, 45, 90, -45],
                //形状
                shape: 'circle',
                textStyle: {
                    normal: {
                        color: function() {//文字颜色的随机色
                            return 'rgb(' + [
                                Math.round(Math.random() * 250),
                                Math.round(Math.random() * 250),
                                Math.round(Math.random() * 250)
                            ].join(',') + ')';
                        }
                    },
                    //悬停上去的字体的阴影设置
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                data: JosnList
            }]
        };
        var myChartFour = echarts.init(document.getElementById('cyt'));
        //使用制定的配置项和数据显示图表
        myChartFour.setOption(optionFour);

感谢提出的问题，已经修改

image.png