用Echarts词云数据可视化热词表白​​

目录

1、使用前准备

2、准备工作

3、盒子搭建

 4、整体展现

---

1、使用前准备

        找到表白对象（重中之重！），不要一见钟情（个人觉得：一见钟情属于见色起意！），因为数据可视化需要一定量的数据，一见钟情的简单寒暄，是不足以体现数据的准确性与严谨性，所以希望大家在这个美好的国家，美好的时间段里找到自己心中所爱，性格喜，习惯相契合的表白对象，从而在其中发现数据，挖掘数据，用数据感受对方。

        虽然这边博客有可能让对方觉得你是个理工男（我想你们并没有相互吸引）

2、准备工作

        需要用到两个网站

        1、base64图片在线转换工具https://tool.chinaz.com/tools/imgtobase/

 

        2、iconfont-阿里巴巴矢量图标库https://www.iconfont.cn/?spm=a313x.search_index.i3.2.7d543a81Bywc8E

 搜索矢量图标，尽量选择黑色的矢量图

 下载保存

选择PNG下载

 

 将刚刚下载的爱心图片转换为base64格式

 复制代码

data:image/png;base64,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

3、盒子搭建

       有了表白对象，有了数据。

        开始搭建盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爱心词云图</title>
    
    <script src="js/echarts.js"></script>
    <script src="js/echarts-wordcloud.min.js"></script>
</head>
<body>
    
    <div id="main" style="width: 600px;height: 500px; "></div>

    <script >

    </script>
</body>
</html>

//用来存储数据
        var jsonlist = [];

//数据
jsonlist.push(                   
        {
            "name": "关注景点",
            "value": 611
        },
        {
            "name": "旅游网站偏好",
            "value": 512
        },
        {
            "name": "出国游",
            "value": 382
        },
        {
            "name": "交通票务",
            "value": 312
        },
        {
            "name": "旅游方式",
            "value": 187
        },
        {
            "name": "旅游主题",
            "value": 163
        },
        {
            "name": "港澳台",
            "value": 104
        },
        {
            "name": "本地周边游",
            "value": 3
        },
        {
            "name": "小卖家",
            "value": 1331
        },
        {
            "name": "全日制学校",
            "value": 941
        },
        {
            "name": "基础教育科目",
            "value": 585
        },
        {
            "name": "考试培训",
            "value": 473
        },
        {
            "name": "语言学习",
            "value": 358
        },
        
        {
            "name": "理财购物",
            "value": 440
        },
        {