一.简介

  参考ECharts快速入门:https://www.cnblogs.com/yszd/p/11166048.html

二.代码实现

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>ECharts入门</title>
  6. </head>
  7. <body>
  8.    <!-- 为ECharts准备一个具备大小(宽高)的DOM容器-->
  9. <div style='width:100%;height:100%'>
  10. <div id='back' style='width:60%;height:400px;float:left;'></div>
  11. <div id='main' style='width:40%;height:400px;float:left;'></div>
  12. <div id='left' style='width:60%;height:400px;float:left;'></div>
  13. <div id='right' style='width:40%;height:400px;float:left;'></div>
  14. </div>
  15.  
  16.    <!-- 引入ECharts文件 -->
  17.    <script src='js/echarts-all.js'></script>
  18. <script src='js/echarts-wordcloud.min.js'></script>
  19.    <script>
  20.        function createRandomItemStyle(){
  21. return {
  22. normal: {
  23. color: 'rgb(' + [
  24. Math.round(Math.random() * 160),
  25. Math.round(Math.random() * 160),
  26. Math.round(Math.random() * 160)
  27. ].join(',') + ')'
  28. }
  29. };
  30. }
  31. //基于准备好的DOM,初始化echarts实例
  32.         var myChart = echarts.init(document.getElementById('main'));
  33. var myChart2 = echarts.init(document.getElementById('back'));
  34. var myChart3 = echarts.init(document.getElementById('left'));
  35. var myChart4 = echarts.init(document.getElementById('right'));
  36.  
  37. /* var loadingTicket = myChart.showLoading({
  38. text: 'loading',
  39. color: '#4cbbff',
  40. textColor: '#4cbbff',
  41. maskColor: 'rgba(0, 0, 0, 0.9)',
  42. }); */
  43.  
  44.           //指定图表的配置项和数据
  45. option = {
  46. title: {
  47. text: '文本分析算法词云'
  48. },
  49. tooltip:{
  50. trigger:'axis'
  51. },
  52. toolbox: {
  53. show: true,
  54. feature:{
  55. mark:{show:true},
  56. dataView:{show:true,readOnly:false},
  57. magicType:{show:true,type:['line','bar']},
  58. restore:{show:true},
  59. saveAsImage:{show:true}
  60. }
  61. },
  62. series: [{
  63. name: '词云',
  64. type: 'wordCloud',
  65. size: ['80%', '80%'],
  66. textRotation : [0, 45, 90, -45],
  67. textPadding: 0,
  68. autoSize: {
  69. enable: true,
  70. minSize: 14
  71. },
  72. data:[
  73. {
  74. name: "质量",
  75. value: 6564,
  76. itemStyle: createRandomItemStyle()
  77. },
  78. {
  79. name: "稽查",
  80. value: 4181,
  81. itemStyle: createRandomItemStyle()
  82. },
  83. {
  84. name: "流程",
  85. value: 3386,
  86. itemStyle: createRandomItemStyle()
  87. },
  88. {
  89. name: "核实",
  90. value: 2655,
  91. itemStyle: createRandomItemStyle()
  92. },
  93. {
  94. name: "现场",
  95. value: 2467,
  96. itemStyle: createRandomItemStyle()
  97. },
  98. {
  99. name: "管理",
  100. value: 2244,
  101. itemStyle: createRandomItemStyle()
  102. },
  103. {
  104. name: "用户",
  105. value: 1898,
  106. itemStyle: createRandomItemStyle()
  107. },
  108. {
  109. name: "系统",
  110. value: 1484,
  111. itemStyle: createRandomItemStyle()
  112. },
  113. {
  114. name: "整改",
  115. value: 1112,
  116. itemStyle: createRandomItemStyle()
  117. },
  118. {
  119. name: "电力系统",
  120. value: 965,
  121. itemStyle: createRandomItemStyle()
  122. },
  123. {
  124. name: "河南供电局",
  125. value: 847,
  126. itemStyle: createRandomItemStyle()
  127. },
  128. {
  129. name: "交变电高压线路",
  130. value: 582,
  131. itemStyle: createRandomItemStyle()
  132. },
  133. {
  134. name: "Lewis Hamilton",
  135. value: 555,
  136. itemStyle: createRandomItemStyle()
  137. },
  138. {
  139. name: "KXAN",
  140. value: 550,
  141. itemStyle: createRandomItemStyle()
  142. },
  143. {
  144. name: "Mary Ellen Mark",
  145. value: 462,
  146. itemStyle: createRandomItemStyle()
  147. },
  148. {
  149. name: "Farrah Abraham",
  150. value: 366,
  151. itemStyle: createRandomItemStyle()
  152. },
  153. {
  154. name: "Rita Ora",
  155. value: 360,
  156. itemStyle: createRandomItemStyle()
  157. },
  158. {
  159. name: "Serena Williams",
  160. value: 282,
  161. itemStyle: createRandomItemStyle()
  162. },
  163. {
  164. name: "NCAA baseball tournament",
  165. value: 273,
  166. itemStyle: createRandomItemStyle()
  167. },
  168. {
  169. name: "Point Break",
  170. value: 265,
  171. itemStyle: createRandomItemStyle()
  172. }
  173. ]
  174. }]
  175. };
  176.  
  177. option2 = {
  178. title: {
  179. text: '热词分布'
  180. },
  181. tooltip : {
  182. trigger: 'axis',
  183. axisPointer : {
  184. type: 'shadow'
  185. }
  186. },
  187. legend: {
  188. data:['稽查工单','隐患问题库','典型案例库'],
  189. axisLabel:{
  190. show:true,
  191. textStyle:{
  192. fontSize:16
  193. }
  194. }
  195. },
  196. toolbox: {
  197. show : true,
  198. orient : 'vertical',
  199. y : 'center',
  200. feature : {
  201. mark : {show: true},
  202. magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
  203. restore : {show: true},
  204. saveAsImage : {show: true}
  205. }
  206. },
  207. calculable : true,
  208. xAxis : [
  209. {
  210. type : 'category',
  211. data : ["郑州","平顶山","商丘","洛阳","信阳","安阳","驻马店","新乡","开封","许昌","南阳","焦作","漯河","濮阳","周口","鹤壁","三门峡","济源"],
  212. axisLabel:{
  213. show:true,
  214. textStyle:{
  215. fontSize:16
  216. }
  217. }
  218. }
  219. ],
  220. yAxis : [
  221. {
  222. type : 'value',
  223. splitArea : {show : true},
  224. axisLabel:{
  225. show:true,
  226. textStyle:{
  227. fontSize:16
  228. }
  229. }
  230. }
  231. ],
  232. grid: {
  233. x2:40
  234. },
  235. series : [
  236. {
  237. name:'稽查工单',
  238. type:'bar',
  239. stack: '总量'
  240. },
  241. {
  242. name:'隐患问题库',
  243. type:'bar',
  244. stack: '总量'
  245. },
  246. {
  247. name:'典型案例库',
  248. type:'bar',
  249. stack: '总量',
  250. itemStyle:{
  251. normal:{
  252. label:{
  253. show:true,
  254. position:'top',
  255. formatter:'{c}',
  256. fontSize:16
  257. }
  258. }
  259. }
  260. }
  261. ]
  262. };
  263.  
  264. option3 = {
  265. title : {
  266. text: '一周内热词变化',
  267. subtext: '测试数据'
  268. },
  269. tooltip : {
  270. trigger: 'axis'
  271. },
  272. legend: {
  273. data:['最高热词','最低热词']
  274. },
  275. toolbox: {
  276. show : true,
  277. feature : {
  278. mark : {show: true},
  279. dataView : {show: true, readOnly: false},
  280. magicType : {show: true, type: ['line', 'bar']},
  281. restore : {show: true},
  282. saveAsImage : {show: true}
  283. }
  284. },
  285. calculable : true,
  286. xAxis : [
  287. {
  288. type : 'category',
  289. boundaryGap : false,
  290. data : ['周一','周二','周三','周四','周五','周六','周日']
  291. }
  292. ],
  293. yAxis : [
  294. {
  295. type : 'value',
  296. axisLabel : {
  297. formatter: '{value}'
  298. }
  299. }
  300. ],
  301. series : [
  302. {
  303. name:'最高热词',
  304. type:'line',
  305. data:[114, 131, 125, 213, 412, 143, 310],
  306. markPoint : {
  307. data : [
  308. {type : 'max', name: '最大值'},
  309. {type : 'min', name: '最小值'}
  310. ]
  311. },
  312. markLine : {
  313. data : [
  314. {type : 'average', name: '平均值'}
  315. ]
  316. }
  317. },
  318. {
  319. name:'最低热词',
  320. type:'line',
  321. data:[114, 131, 125, 213, 412, 143, 310],
  322. markPoint : {
  323. data : [
  324. {name : '周最低', value : 114, xAxis: 0, yAxis: 1.5}
  325. ]
  326. },
  327. markLine : {
  328. data : [
  329. {type : 'average', name : '平均值'}
  330. ]
  331. }
  332. }
  333. ]
  334. };
  335.  
  336. option4 = {
  337. title : {
  338. text: '热词层级',
  339. subtext: '测试数据'
  340. },
  341. tooltip : {
  342. trigger: 'item',
  343. formatter: "{a} <br/>{b} : {c} ({d}%)"
  344. },
  345. legend: {
  346. orient : 'vertical',
  347. x : '0px',
  348. y : '60px',
  349. data:['直达','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
  350. },
  351. toolbox: {
  352. show : true,
  353. feature : {
  354. mark : {show: true},
  355. dataView : {show: true, readOnly: false},
  356. magicType : {
  357. show: true,
  358. type: ['pie', 'funnel']
  359. },
  360. restore : {show: true},
  361. saveAsImage : {show: true}
  362. }
  363. },
  364. calculable : false,
  365. series : [
  366. {
  367. name:'访问来源',
  368. type:'pie',
  369. selectedMode: 'single',
  370. radius : [0, 70],
  371.  
  372. // for funnel
  373. x: '20%',
  374. width: '40%',
  375. funnelAlign: 'right',
  376. max: 1548,
  377.  
  378. itemStyle : {
  379. normal : {
  380. label : {
  381. position : 'inner'
  382. },
  383. labelLine : {
  384. show : false
  385. }
  386. }
  387. },
  388. data:[
  389. {value:335, name:'典型案例库'},
  390. {value:679, name:'隐患问题库'},
  391. {value:1548, name:'稽查工单', selected:true}
  392. ]
  393. },
  394. {
  395. name:'访问来源',
  396. type:'pie',
  397. radius : [100, 140],
  398.  
  399. // for funnel
  400. x: '60%',
  401. width: '35%',
  402. funnelAlign: 'left',
  403. max: 1048,
  404.  
  405. data:[
  406. {value:335, name:'直达'},
  407. {value:310, name:'邮件营销'},
  408. {value:234, name:'联盟广告'},
  409. {value:135, name:'视频广告'},
  410. {value:1048, name:'百度'},
  411. {value:251, name:'谷歌'},
  412. {value:147, name:'必应'},
  413. {value:102, name:'其他'}
  414. ]
  415. }
  416. ]
  417. };
  418.  
  419. var series = option["series"];
  420. var series2 = option2["series"];
  421. var loc = 0;
  422. var fun = function (params) {
  423. var data = 0;
  424. for(var i=0,len = series2.length;i<len;i++){
  425. data += series2[i].data[loc];
  426. }
  427. loc += 1;
  428. return data
  429. }
  430. //设置每种类别的值
  431. series2[0]['data'] = [320, 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
  432. series2[1]['data'] = [320, 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
  433. series2[2]['data'] = [320, 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
  434.  
  435. //加载页面时候替换最后一个series的formatter
  436. series2[series2.length-1]["itemStyle"]["normal"]["label"]["formatter"] = fun
  437.  
  438. //使用刚指定的配置项和数据显示图表
  439.         //clearTimeout(loadingTicket);
  440. loadingTicket = setTimeout(function (){
  441. //myChart.hideLoading();
  442. myChart.setOption(option);
  443.  
  444. //myChart2.hideLoading();
  445. myChart2.setOption(option2);
  446.  
  447. myChart3.setOption(option3);
  448. myChart4.setOption(option4);
  449. },300);
  450.  
  451. myChart.connect(myChart2);
  452. myChart2.connect(myChart);
  453.  
  454. setTimeout(function (){
  455. window.onresize = function () {
  456. myChart.resize();
  457. myChart2.resize();
  458. }
  459. },200)
  460.  
  461. myChart.on('click', function (params) {
  462. //获取随机数
  463. var jc = Math.random();
  464. var yh = (1 - jc) * Math.random();
  465. var dx = (1 - jc) - yh;
  466.  
  467. series2[0]['data'] = [parseInt(params.value * jc), 332, 301, parseInt(params.value * dx), 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
  468. series2[1]['data'] = [parseInt(params.value * yh), 332, 301, 334, 390, 330, parseInt(params.value * jc), 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
  469. series2[2]['data'] = [parseInt(params.value * dx), 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, parseInt(params.value * jc), 223, 123]
  470.  
  471. var loc = 0;
  472. var fun = function (params) {
  473. var data = 0;
  474. for(var i=0,len = series2.length;i<len;i++){
  475. data += series2[i].data[loc];// - parseInt(Math.random() * 100)
  476. }
  477. loc += 1;
  478. return data
  479. }
  480.  
  481. //加载页面时候替换最后一个series的formatter
  482. series2[series2.length-1]["itemStyle"]["normal"]["label"]["formatter"] = fun
  483. myChart2.setOption(option2);
  484. });
  485.  
  486. myChart2.on('click', function (params){
  487. series[series.length-1]['data'][0]['name'] = '资产'
  488. series[series.length-1]['data'][0]['value'] = parseInt(Math.random() * 10000)
  489. myChart.setOption(option);
  490. })
  491.    </script>
  492. </body>
  493. </html>

三.效果

ECharts大屏可视化【词云,堆积柱状图,折线图,南丁格尔玫瑰图】的更多相关文章

  1. ECharts学习(2)--饼状图之南丁格尔图

    1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...

  2. 基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化

    前言 在大数据盛行的现在,大屏数据可视化也已经成为了一个热门的话题.大屏可视化可以运用在众多领域中,比如工业互联网.医疗.交通.工业控制等等.将各项重要指标数据以图表.各种图形等形式表现在一个页面上, ...

  3. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  4. Echarts大数据可视化物流航向省份流向迁徙动态图,开发全解+完美参数注释

    最近在研究Echarts的相关案例,毕竟现在大数据比较流行,比较了D3.js.superset等相关的图表插件,还是觉得echarts更简单上手些. 本文是以原生JS为基础,如果使用Vue.js的话, ...

  5. 【拖拽可视化大屏】全流程讲解用python的pyecharts库实现拖拽可视化大屏的背后原理,简单粗暴!

    "整篇文章较长,干货很多!建议收藏后,分章节阅读." 一.设计方案 整体设计方案思维导图: 整篇文章,也将按照这个结构来讲解. 若有重点关注部分,可点击章节目录直接跳转! 二.项目 ...

  6. Python 词云可视化

    最近看到不少公众号都有一些词云图,于是想学习一下使用Python生成可视化的词云,上B站搜索教程的时候,发现了一位UP讲的很不错,UP也给出了GitHub上的源码,是一个很不错的教程,这篇博客主要就是 ...

  7. Scrapy+eChart自动爬取生成网络安全词云

    因为工作的原因,近期笔者开始持续关注一些安全咨询网站,一来是多了解业界安全咨询提升自身安全知识,二来也是需要从各类安全网站上收集漏洞情报. 作为安全情报领域的新手,面对大量的安全咨询,多少还是会感觉无 ...

  8. flex布局构建大屏框架并支持翻页动画、滚动表格功能

      本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效 ...

  9. vue+echarts可视化大屏,全国地图下钻,页面自适应

    之前写过一篇关于数据大屏及地图下钻的文章 https://www.cnblogs.com/weijiutao/p/13977011.html ,但是存在诸多问题,如地图边界线及行政区划老旧,无法自适应 ...

随机推荐

  1. ASP.NET Core中的运行状况检查

    由卢克·莱瑟姆和格伦Condron ASP.NET Core提供了运行状况检查中间件和库,用于报告应用程序基础结构组件的运行状况. 运行状况检查由应用程序公开为HTTP终结点.可以为各种实时监视方案配 ...

  2. odoo开发笔记 -- 提高访问安全性的一种方式

    场景描述: 最近在做项目的过程中,需要需要将odoo应用集成到其他系统中, 在对方的系统中点击我们的应用,打开对应系统,但是界面不做跳转,在当前页面打开,并且浏览器地址栏只显示IP+应用名,不让显示o ...

  3. mongo 分片机如何建立库和实例(数据表)

    mongo分片创建表和实例 第一步:首先在admin账户下: mongo 'mongodb://root:abcccSRP@s-2ze333323gggg.mongodb.rds.aliyuncs.c ...

  4. CentOS使用yum安装最新版nginx步骤

    sudo yum install yum-utilsvi  /etc/yum.repos.d/nginx.repo 输入: [nginx-stable]name=nginx stable repoba ...

  5. CSAGAN:LinesToFacePhoto: Face Photo Generation from Lines with Conditional Self-Attention Generative Adversarial Network - 1 - 论文学习

    ABSTRACT 在本文中,我们探讨了从线条生成逼真的人脸图像的任务.先前的基于条件生成对抗网络(cGANs)的方法已经证明,当条件图像和输出图像共享对齐良好的结构时,它们能够生成视觉上可信的图像.然 ...

  6. PHP计算思源字体宽度, 并把文字绘制到图片上

    2019-6-19 9:18:54 星期三 思源字体是一套开源的字体, 那字体宽度是多少呢? 测试场景, 将包含汉字, 数字, 大小写字符的一段文字写到图片中去, 但不能出现超出的情况,  这就要计算 ...

  7. Performance-Schema

    https://yq.aliyun.com/articles/640181?spm=a2c4e.11153940.0.0.347359d3DAu7sW MySQL Performance-Schema ...

  8. a dynamic resume

    介绍 发现一款开源的动画简历工程, 很是吸引眼球, 分享出来. 技术: 1. npm工程管理 2. vuejs 设计上,将工程分为两个组件: 0.程序入口组件 1. 编辑器组件 2. 简历展示组件 流 ...

  9. POI 读取Excel文件 并解析JSON数据

    package skuPrice; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundEx ...

  10. 将网页html文件离线下载保存到本地的方法

    (1)复制想要离线的网页的网址: 范例:http://bbs.xyaz.cn/thread-52540-1-1.html (2)将网址放入迅雷中,让其将html文件下载下来. (3)下载结果