echarts 词云

297 阅读1分钟

由于echarts2以后的版本中都没有字符云,所以在使用的时候需要先把字符云组件引入

首先下载字符云 cnpm install echarts-wordcloud

//添加字符云,前提要有echarts
import 'echarts-wordcloud/dist/echarts-wordcloud'
import 'echarts-wordcloud/dist/echarts-wordcloud.min'

==sizeRange用来修改词云文字大小范围==

在这里插入图片描述

option={
                    backgroundColor:"white",
                    tooltip: {
                        show: true
                    },
                    series: [{
                        type: 'wordCloud',
                        gridSize: 40, //修改文字(画布)之间的间距
                        shape: 'line',
                        rotationRange: [0, 0],//数据翻转范围
                        sizeRange: [25, 30],//画布范围,如果设置太大会出现少词(溢出屏幕)设置文字大小范围
                        left: "center",
                        top: "center",
                        right: null,
                        bottom: null,
                        width:800,
                        height:500,
                        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: [
                            {
                                name: " 没有",
                                value: 30,
                            },
                            {
                                name: " 屏幕",
                                value: 24
                            },
                            {
                                name: " 不错",
                                value: 21
                            },
                            {
                                name: " 没有",
                                value: 30,
                            },
                            {
                                name: " 屏幕",
                                value: 24
                            },
                            {
                                name: " 不错",
                                value: 21
                            },
                        ],
                    }]
}