实现一个简单的echarts词云图PythonFlask
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的更多相关文章
- Echarts词云图
今天使用Echarts写了个词云图,之前使用pycharts生成的html就是echarts.主要代码如下,另外Echarts需要到https://www.echartsjs.com/下载,开发时使用 ...
- python词云图与中文分词
2019-12-12中文文本分词和词云图具体功能介绍与学习代码: import jiebaa="由于中文文本的单词不是通过空格或者标点符号来进行分割"#jieba.lcut()s是 ...
- 用Python制作酷炫词云图，原来这么简单！
一.简介词云图是文本挖掘中用来表征词频的数据可视化图像,通过它可以很直观地展现文本数据中地高频词:! 图1 词云图示例 在Python中有很多可视化框架可以用来制作词云图,如pyecharts,但这些 ...
- 用python实现一个简单的词云
对于在windows(Pycharm工具)里实现一个简单的词云还是经过了几步小挫折,跟大家分享下,如果遇到类似问题可以参考: 1. 导入wordcloud包时候报错,当然很明显没有安装此包. 2. 安 ...
- python 数据分析--词云图，图形可视化美国竞选辩论
这篇博客从用python实现分析数据的一个完整过程.以下着重几个python的moudle的运用"pandas",""wordcloud"," ...
- echarts词云引用
最近项目中需要使用echarts的词云图,因为几经波折才引用成功,所以想记下来跟大家分享,(我的随笔不会写那么多让人需要动脑子去理解的东西,就是记录一下步骤,因为经验甚少,底层原理懂得不多,所以就先记 ...
- V-Charts中使用extend属性定制词云图
[本文出自天外归云的博客园] 简介 在Vue中使用E-Charts可以用V-Charts,词云图在V-Charts官网中介绍比较简单,如果想更多定制的话,官网上说要在extend属性中进行扩展. V- ...
- python爬虫+词云图，爬取网易云音乐评论
又到了清明时节,用python爬取了网易云音乐<清明雨上>的评论,统计词频和绘制词云图,记录过程中遇到一些问题 爬取网易云音乐的评论 一开始是按照常规思路,分析网页ajax的传参情况.看到 ...
- Excel催化剂开源第27波-Excel离线生成词云图
在数据分析领域,词云图已经成为在文本分析中装逼的首选图表,大家热烈地讨论如何在Python上做数据分析.做词云图. 数据分析从来都是Excel的主战场,能够让普通用户使用上的技术才是最有价值的技术,一 ...
- 个人永久性免费-Excel催化剂功能第18波-在Excel上也能玩上词云图
这年头数据可视化日新月异,在Excel上做数据分析,最后一步,难免要搞个图表输出高大上一回,微软也深知此道,在Excel2016上更新了一大波图表功能,市场上很耀眼的词云图还是没加进来,虽然在各大的在 ...
随机推荐
- 解决 Order By 将字符串类型的数字 或 字符串中含数字 按数字排序问题
oracle数据库,字段是varchar2类型即string,而其实存的是数字,这时候不加处理的order by的排序结果,肯定有问题解决办法: (1)cast( 要排序的字 ...
- timeit测试函数执行时间
def list_append(): l = [] for i in range(5000): l.append(i) def list_insert(): l = [] for i in range ...
- git commit 不生成 changeId 解决方案
1). 检查仓储 .git/hook 下面是否有 commit-msg 文件,如果没有可以到下面的地址下载,或者把其他同事的 commit-msg 文件拷贝到你的 .git/hook 重新commit ...
- 高效的PDF文字提取技术
无论是行政法规.学术论文还是企业合同,PDF文档为我们提供了一种便捷.稳定的信息传递方式.然而,从PDF文件中提取文本信息对于数据分析.内容编辑等后续处理来说至关重要. PDF文本提取技术是一种可以从 ...
- 【Azure 应用服务】应用代码中需要使用客户端证书访问服务接口，部署在应用服务后报错不能找到证书（Cannot find the X.509 certificate)
问题描述 在应用中,需要访问另一个服务接口,这个接口需要使用客户端证书进行认证.在代码中使用 System.Security.Cryptography.X509Certificates 加载Windo ...
- 【Azure App Service for Linux】Linux Web App如何安装系统未安装的包
问题描述 Linux Web App中如何安装系统默认未安装的包,如何来执行如 apt install XXX命令呢?现在遇见的问题时,通过Azure App Service门户中的SSH登录后,执行 ...
- Educational Codeforces Round 143 (Rated for Div. 2)C. Tea Tasting(前缀和+二分、贡献枚举)
C. Tea Tasting 思路 这里枚举有三种思路 然后经过考虑3是最可行的,然后接着考虑如何计算贡献 这里在实现的时候用了一个差分数组,因为我们需要记录第i个茶师它喝了多少个\(b_i\)以及不 ...
- Springboot+POI实现excel生成下载进阶版（单元格合并，多Sheet,各种样式处理）
上周五来了新的需求,基本上我写的还款那一系列流程不要了(我好悲伤,当时写了很久的,逻辑复杂的写的我很骄傲),新的变成如上所示(仅仅一部分),勾选几笔后生成一个excel表格,不同的融资编号所引发的那堆 ...
- tomcat 安装笔记 20230901
war位置 /usr/local/tomcat8_1/webapps/ tomcat位置 71.170 /usr/local/tomcat8_1/ 给了点工具包 位置 /usr/local/tool/ ...
- vscode 点击 import 的对象 from 带有 @ 不能自动跳转 - 要配置 jsconfig.json
问题 vscode 点击 import 的对象 from 带有 @ 不能自动跳转 - 要配置 jsconfig.json 答案 根目录 创建 jsconfig.json 20220808 更新 inc ...