echars 字符云效果，echars字符云颜色问题

Echarts词云插件实战

最新推荐文章于 2024-09-25 15:16:34 发布

原创最新推荐文章于 2024-09-25 15:16:34 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#字符云 #echars

echarts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Echarts的词云插件创建动态词云图表，通过具体示例展示了如何配置词云的样式、颜色及数据源，实现丰富的可视化效果。

需要引入echars 4.0以下的插件，4.0插件字体颜色不能设置
   <script src="js/echarts/echarts.min-3.6.2.js"></script>
   
   <script src="js/echarts/echarts-wordcloud.min.js"></script>

 	// Word Cloud 词云展示
 	function wordCloud(){

 		var data = [{
            "name": "西安奔驰店",
            "value": 1446
        },
        {
            "name": "奔驰漏机油",
            "value": 928
        },
        {
            "name": "女研究生",
            "value": 906
        },
        {
            "name": "狗狗",
            "value": 125
        },
        {
            "name": "猫猫",
            "value": 925
        },
        {
            "name": "沙发",
            "value": 625
        },
        {
            "name": "回家",
            "value": 825
        },
        {
            "name": "电影",
            "value": 825
        },
        {
            "name": "电视",
            "value": 1825
        }, 
        {
            "name": "手机",
            "value": 825
        },
        {
            "name": "电视",
            "value": 825
        },
        {
            "name": "px4",
            "value": 825
        },

        {
            "name": "Lover Boy 88",
            "value": 514
        }]

		var wordcloudColor =['#ff85c0', '#b37feb', '#85a5ff', '#69c0ff', '#5cdbd3', '#95de64', '#d3f261', '#fff566', '#ffd666', '#ffc069', '#ff9c6', '#ff7875', '#97dcfc', '#ffa4a4', '#a09af5', '#e99af5', '#91e4f2', '#91f291', '#dcf299', '#fad4a0'];
 		 
  		var word_cloud = echarts.init(document.getElementById('word_cloud')); 
		

		var option = {
		    title: {
		        // text: 'Google Trends',
		        // link: 'http://www.google.com/trends/hottrends'
		    },
		    // tooltip: {
		    //     show: true
		    // },
		    color:wordcloudColor,
		    series: [{
		        type: 'wordCloud',
		        size: ['100%', '100%'],
		        sizeRange: [12, 50],
		        rotationRange: [0, 0],
		        shape: 'circle',
		        textPadding: 0,
		        textStyle: {
		             normal: {
		                color: function(v) {
		                    let color = ['#ac32e4',"#5b40ff","#7e7e7e",'#ac32e4',"#5b40ff","#7e7e7e",'#ac32e4',"#5b40ff","#7e7e7e"]
		                     let num =Math.floor(Math.random() * (3));
		                    return color[num];
		                },
		            },
		        },
		        autoSize: {
		            enable: true,
		            minSize: 14
		        }, 
		        data: data
		    }]
		};
                    
 		word_cloud.setOption(option);
 	}