cloud.html

  1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <title>WordCloud Demo</title>

  6 </head>

  7 <body>

  8     <!-- 顺序不能变-->

  9     <script src='../static/js/echarts.min.js'></script>

 10     <script src='../static/js/echarts-wordcloud.min.js'></script>

 11     <script src="../static/js/jquery-3.3.1.min.js"></script>

 12     <div id="wordcloud_echarts" style="width:900px; height:600px">

 13     </div>

 14     <div>

 15         <select id="myselect">

 16             <option value="result_data" selected>全部数据</option>

 17             <option value="result_cj">财经</option>

 18             <option value="result_fc">房产</option>

 19             <option value="result_game">游戏</option>

 20             <option value="result_js">军事</option>

 21             <option value="result_jy">教育</option>

 22             <option value="result_kj">科技</option>

 23             <option value="result_qc">汽车</option>

 24             <option value="result_ty">体育</option>

 25             <option value="result_tyjd">体育焦点</option>

 26             <option value="result_zhty">综合体育最新</option>

 27             <option value="result_yl">娱乐</option>

 28         </select>

 29         <button  onclick="tijiao()">检索</button>

 30     </div>

 31     <script>

 32

 33         //--------------------------------------------------------------

 34         var myChart = echarts.init(document.getElementById('wordcloud_echarts'));

 35         var option = {

 36          tooltip: {

 37             show: true,

 38             trigger: 'item',

 39             position: "top"

 40         },

 41         series: [{

 42             type: 'wordCloud',

 43             sizeRange: [15, 80],

 44             rotationRange: [0, 0],

 45             rotationStep: 45,

 46             gridSize: 8,

 47             shape: 'pentagon',

 48             width: '100%',

 49             height: '100%',

 50             textStyle: {

 51                 normal: {

 52                     color: function () {

 53                         return 'rgb(' + [

 54                             Math.round(Math.random() * 160),

 55                             Math.round(Math.random() * 160),

 56                             Math.round(Math.random() * 160)

 57                         ].join(',') + ')';

 58                     }

 59                 },

 60                 emphasis: {  // 单词高亮时显示的效果

 61                 shadowBlur: 10,

 62                 shadowColor: '#333'

 63                 }

 64             },

 65             left: 'center',

 66             top: 'center',

 67             data: [{

 68           "name": "花鸟市场",

 69           "value": 1446

 70         },

 71           {

 72             "name": "汽车",

 73             "value": 928

 74           },

 75           {

 76             "name": "视频",

 77             "value": 906

 78           },

 79           {

 80             "name": "电视",

 81             "value": 825

 82           },

 83           {

 84             "name": "Lover Boy 88",

 85             "value": 514

 86           }]

 87         }]

 88     };

 89     myChart.setOption(option);

 90     window.addEventListener("resize", function() {

 91         myChart.resize();

 92     })

 93         function tijiao(){

 94             var select_value= document.getElementById("myselect").value

 95             $.ajax({

 96                 url:"/cloud_data?data="+select_value+"",

 97                 async:true,

 98                 success:function(data) {

 99                     option.series[0].data=data.data

100                     // 使用刚指定的配置项和数据显示图表。

101                     myChart.setOption(option);

102                 },
1 success:function(data) {

2                     option.series[0].data=data.data

3                     // 使用刚指定的配置项和数据显示图表。

4                     myChart.setOption(option);

5                 },


103                 error:function (xhr,type,errorThrown) {

104                     alert("出现错误！")

105                 }

106             })

107         }

108     </script>

109 </body>

110 </html>




有三个点需要注意：


1、js文件引入顺序




1        <!-- 顺序不能变-->

2       <script src='../static/js/echarts.min.js'></script>

3     　<script src='../static/js/echarts-wordcloud.min.js'></script>

4       <script src="../static/js/jquery-3.3.1.min.js"></script>        




2、ajax的success方法




1 success:function(data) {

2                     option.series[0].data=data.data

3                     // 使用刚指定的配置项和数据显示图表。

4                     myChart.setOption(option);

5                 },




3、需要的数据格式




 1             data: [{

 2           "name": "花鸟市场",

 3           "value": 1446

 4         },

 5           {

 6             "name": "汽车",

 7             "value": 928

 8           },

 9           {

10             "name": "视频",

11             "value": 906

12           },

13           {

14             "name": "电视",

15             "value": 825

16           },

17           {

18             "name": "Lover Boy 88",

19             "value": 514

20           }]




常用的两个属性


1、鼠标高亮显示


放在series里


      emphasis: {  // 单词高亮时显示的效果
      shadowBlur: 10,
      shadowColor: '#333'
}


2、词语显示value


放在option里


 tooltip: {
    show: true,
    trigger: 'item',
    position: "top"
},


效果


												


											
实现一个简单的echarts词云图PythonFlask的更多相关文章
	

    
						
  1. Echarts词云图
		
    今天使用Echarts写了个词云图,之前使用pycharts生成的html就是echarts.主要代码如下,另外Echarts需要到https://www.echartsjs.com/下载,开发时使用 ...
    
		
    2. 
						
  2. python词云图与中文分词
		
    2019-12-12中文文本分词和词云图具体功能介绍与学习代码: import jiebaa="由于中文文本的单词不是通过空格或者标点符号来进行分割"#jieba.lcut()s是 ...
    
		
    3. 
						
  3. 用Python制作酷炫词云图，原来这么简单！
		
    一.简介词云图是文本挖掘中用来表征词频的数据可视化图像,通过它可以很直观地展现文本数据中地高频词:! 图1 词云图示例 在Python中有很多可视化框架可以用来制作词云图,如pyecharts,但这些 ...
    
		
    4. 
						
  4. 用python实现一个简单的词云
		
    对于在windows(Pycharm工具)里实现一个简单的词云还是经过了几步小挫折,跟大家分享下,如果遇到类似问题可以参考: 1. 导入wordcloud包时候报错,当然很明显没有安装此包. 2. 安 ...
    
		
    5. 
						
  5. python 数据分析--词云图，图形可视化美国竞选辩论
		
    这篇博客从用python实现分析数据的一个完整过程.以下着重几个python的moudle的运用"pandas",""wordcloud"," ...
    
		
    6. 
						
  6. echarts词云引用
		
    最近项目中需要使用echarts的词云图,因为几经波折才引用成功,所以想记下来跟大家分享,(我的随笔不会写那么多让人需要动脑子去理解的东西,就是记录一下步骤,因为经验甚少,底层原理懂得不多,所以就先记 ...
    
		
    7. 
						
  7. V-Charts中使用extend属性定制词云图
		
    [本文出自天外归云的博客园] 简介 在Vue中使用E-Charts可以用V-Charts,词云图在V-Charts官网中介绍比较简单,如果想更多定制的话,官网上说要在extend属性中进行扩展. V- ...
    
		
    8. 
						
  8. python爬虫+词云图，爬取网易云音乐评论
		
    又到了清明时节,用python爬取了网易云音乐<清明雨上>的评论,统计词频和绘制词云图,记录过程中遇到一些问题 爬取网易云音乐的评论 一开始是按照常规思路,分析网页ajax的传参情况.看到 ...
    
		
    9. 
						
  9. Excel催化剂开源第27波-Excel离线生成词云图
		
    在数据分析领域,词云图已经成为在文本分析中装逼的首选图表,大家热烈地讨论如何在Python上做数据分析.做词云图. 数据分析从来都是Excel的主战场,能够让普通用户使用上的技术才是最有价值的技术,一 ...
    
		
    10. 
						
  10. 个人永久性免费-Excel催化剂功能第18波-在Excel上也能玩上词云图
		
    这年头数据可视化日新月异,在Excel上做数据分析,最后一步,难免要搞个图表输出高大上一回,微软也深知此道,在Excel2016上更新了一大波图表功能,市场上很耀眼的词云图还是没加进来,虽然在各大的在 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 执行shell脚本过程中传递参数
			
    假设我有一个shell脚本install.sh,在运行过程中需要终端输入一条指令才能继续执行,例如程序询问是否删除某文件,终端需要输入Y/N.采用下面的方式可以实现自动输入参数,无需人工干预: ech ...
    
			
    2. 
						
  2. 记一次 QT VS Tools 无法配置 version 的问题
			
    问题概述: 在 QT VS Tools 拓展工具中添加多个 qt 版本的静态库时,发现输入完 Name 和 Path 之后点击 OK,新输入的 version 路径并没有保存成功 测试的 QT VS  ...
    
			
    3. 
						
  3. win32 - 监视网络流量
			
    可以从Windows Sockets 2开始, 虽然微软提供了官方工具, Microsoft Network Monitor 3.4, 不过我们如果能够通过相关的代码和api的调用来深入研究的话,那就 ...
    
			
    4. 
						
  4. 【Android 逆向】【攻防世界】app2
			
    1. 手机安装apk,随便点击,进入到第二个页面就停了 2. jadx打开apk,发现一共有三个activity,其中第三个activity: FileDataActivity 里面有东西 publi ...
    
			
    5. 
						
  5. 【Android逆向】制作Fart脱壳机，完成对NCSearch的脱壳操作
			
    1. 我的手机是Pixel 1 ,下载fart对应的镜像 镜像位置具体参考大佬博客 https://www.anquanke.com/post/id/201896 2 执行 adb reboot bo ...
    
			
    6. 
						
  6. CentOS7安装Chrome及驱动
			
    目录 安装Chrome 更新Chrome 安装Chrome驱动程序 更新Chrome驱动程序 环境:CentOS Linux release 7.4.1708 (Core) 安装Chrome 下载安装 ...
    
			
    7. 
						
  7. Linux驱动开发笔记（二）：ubuntu系统从源码编译安装gcc7.3.0编译器
			
    前言   编译ubuntu驱动之前,发现使用的gcc是7.3.0,而使用apt管理和下载的都无法直接或间接安装gcc7.3.0,于是只能从源码安装gcc7.3.0编译器.   GCC 概述   GCC ...
    
			
    8. 
						
  8. 【Azure 环境】如果Azure中的某一个资源被删除后是否可以查看到删除的记录呢？如Resource Group
			
    问题描述 当一个资源从Azure中删除后,是否有地方可以查看到这些操作的记录呢?如操作人,操作时间等. 问题解答 可以的.通过 Azure订阅页面的活动日志,可以查看所有对订阅下资源的操作记录,包含D ...
    
			
    9. 
						
  9. 聊聊图数据库和图数据库的小知识 Vol.02
			
    2010 年前后,对于社交媒体网络研究的兴起带动了图计算的大规模应用. 2000 年前后热门的是 信息检索 和 分析 ,主要是 Google 的带动,以及 Amazon 的 e-commerce 所用 ...
    
			
    10. 
						
  10. linux基本知识汇总1(基础命令) 20000字汇总
			
    $$$$ 命令选项查看方式1.内建命令(help)格式: help + 内建命令#### help 命令 // 命令使用说明 2.外部命令(–help)一般是 Linux 命令自带的帮助信息,并不是所 ...
    
			
    11.