echarts词云图

最新推荐文章于 2024-06-10 21:57:03 发布

Hadint。

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量562

点赞数 29

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/h_adint/article/details/137528440

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WordCloud Demo</title>
    <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
    <style>
        #main{
            width: 400px;
            height: 400px;
            box-shadow: 0 0 15px 3px rgb(26, 46, 39);
            margin: 100px auto 50px;
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <div id="main" style="width: 600px; height: 500px"></div>
    <script>
            var mycharts = echarts.init(document.getElementById('main'));
            //温馨提示：image 选取有严格要求不可过大；，否则firefox不兼容  iconfont上面的图标可以
            var jsonlist=[];
            jsonlist.push(
                    { "name": "花鸟市场","value": 99 },
                    { "name": "人工智能", "value": 100 },
                    { "name": "机器学习", "value": 500 },
                    { "name": "深度学习", "value": 700 },
                    { "name": "自然语言处理", "value": 600 },
                    { "name": "计算机视觉", "value": 500},
                    { "name": "数据挖掘", "value": 400 },
                    { "name": "神经网络", "value": 30 },
                    { "name": "模式识别", "value": 200 },
                    { "name": "推荐系统", "value": 100 },
                    { "name": "人机交互", "value": 90 },
                    { "name": "语音识别", "value": 85 },
                    { "name": "图像处理", "value": 75 },
                    { "name": "强化学习", "value": 65 },
                    { "name": "智能驾驶", "value": 55 },
                    { "name": "智能家居", "value": 45 },
                    { "name": "虚拟现实", "value": 35 },
                    { "name": "增强现实", "value": 25 },
                    { "name": "机器人技术", "value": 15 },
                    { "name": "自动化", "value": 5 },
                    { "name": "数据分析", "value": 95 },
                    { "name": "模型优化", "value": 85 },
                    { "name": "知识图谱", "value": 75 },
                    { "name": "大数据", "value": 65 },
                    { "name": "云计算", "value": 55 },
                    { "name": "物联网", "value": 45 },
                    { "name": "区块链", "value": 35 },
                    { "name": "金融科技", "value": 25 },
                    { "name": "医疗健康", "value": 15 },
                    { "name": "教育技术", "value": 5 },
                    { "name": "智慧城市", "value": 90 },
                    { "name": "智能制造", "value": 85 },
                    { "name": "生物信息学", "value": 75 },
                    { "name": "网络安全", "value": 65 },
                    { "name": "人脸识别", "value": 55 },
                    { "name": "飞行器技术", "value": 45 },
                    { "name": "自然语言生成", "value": 35 },
                    { "name": "智能辅助", "value": 25 },
                    { "name": "决策支持", "value": 15 },
                    { "name": "智能嵌入式", "value": 5 },
                    { "name": "网络推荐", "value": 90 },
                    { "name": "智能交通", "value": 85 },
                    { "name": "无人驾驶", "value": 75 },
                    { "name": "智能决策", "value": 65 },
                    { "name": "智慧农业", "value": 55 },
                    { "name": "智能医疗", "value": 45 },
                    { "name": "虚拟助手", "value": 35 },
                    { "name": "智能翻译", "value": 25 },
                    { "name": "智能客服", "value": 15 },
                    { "name": "智能投资", "value": 5 },
                    {
                        "name": "汽车",
                        "value": 120
                    },
                    {
                        "name": "视频",
                        "value": 96
                    },
                    {
                        "name": "电视",
                        "value": 300
                    },
                    {
                        "name": "Lover Boy 88",
                        "value": 150
                    },
                    {
                        "name": "动漫",
                        "value": 56
                    },
                    {
                        "name": "音乐",
                        "value": 53
                    },
                    {
                        "name": "直播",
                        "value": 163
                    },
                    {
                        "name": "广播电台",
                        "value": 86
                    },
                    {
                        "name": "戏曲曲艺",
                        "value": 17
                    },
                    {
                        "name": "演出票务",
                        "value": 90
                    },
                    {
                        "name": "给陌生的你听",
                        "value": 30
                    },
                    {
                        "name": "资讯",
                        "value": 1437
                    },
            );
        image1= "data:image/png;base64,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"
        
        var maskResource = new Image()
        maskResource.src=image1;
        
 var option ={
            //设置标题，居中显示
            title:{
                text: 'E词云图',
                left:'center',
             },
            //数据能够点击
            tooltip:{

            },

            series:[
                {
                    maskImage:maskResource,
                    //词的类型
                    type: 'wordCloud',
                    //设置字符大小范围
                    sizeRange:[6,78],
                    rotationRange:[-45,90],
                    textStyle: {
                        normal:{
                            //生成随机的字体颜色
                            color:function () {
                                return 'rgb(' + [
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(',')+')';

                            }
                        }

                    },
                    //不要忘记调用数据
                       data:jsonlist

                 }
            ]

        };
        //加载图像，将数据放在图像中
        maskResource.onload = function(){
            mycharts.setOption(option)

            };
    </script>
</body>
</html>

显示效果的形状可以改变

首先要找到一张图片，为了成功率较高，随意对图片也是有要求的，图片一定要是矢量图，并且最好为黑色填充，当然其他颜色也行；

给大家推荐一个可以获取图片的网站，阿里iconfont图标库；

这里，我下载了png图片，如下图：选择png下载

2.转化图片为base64
我们不能直接使用图片，需要把图片转成base64，这里给大家推荐一个免费转换的网址Base64图片转换

图片上传后，右侧自动就生成base64格式的链接，然后把链接复制保存起来，备用；

然后在代码中修改

Hadint。

关注

29
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
echarts词云图

我们不能直接使用图片，需要把图片转成base64，这里给大家推荐一个免费转换的网址。图片上传后，右侧自动就生成base64格式的链接，然后把链接复制保存起来，备用；首先要找到一张图片，为了成功率较高，随意对图片也是有要求的，图片一定要是。这里，我下载了png图片，如下图：选择png下载。，并且最好为黑色填充，当然其他颜色也行；给大家推荐一个可以获取图片的网站，
复制链接

扫一扫