ECharts大屏可视化【词云,堆积柱状图,折线图,南丁格尔玫瑰图】
一.简介
参考ECharts快速入门:https://www.cnblogs.com/yszd/p/11166048.html
二.代码实现
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>ECharts入门</title>
- </head>
- <body>
- <!-- 为ECharts准备一个具备大小(宽高)的DOM容器-->
- <div style='width:100%;height:100%'>
- <div id='back' style='width:60%;height:400px;float:left;'></div>
- <div id='main' style='width:40%;height:400px;float:left;'></div>
- <div id='left' style='width:60%;height:400px;float:left;'></div>
- <div id='right' style='width:40%;height:400px;float:left;'></div>
- </div>
- <!-- 引入ECharts文件 -->
- <script src='js/echarts-all.js'></script>
- <script src='js/echarts-wordcloud.min.js'></script>
- <script>
- function createRandomItemStyle(){
- return {
- normal: {
- color: 'rgb(' + [
- Math.round(Math.random() * 160),
- Math.round(Math.random() * 160),
- Math.round(Math.random() * 160)
- ].join(',') + ')'
- }
- };
- }
- //基于准备好的DOM,初始化echarts实例
- var myChart = echarts.init(document.getElementById('main'));
- var myChart2 = echarts.init(document.getElementById('back'));
- var myChart3 = echarts.init(document.getElementById('left'));
- var myChart4 = echarts.init(document.getElementById('right'));
- /* var loadingTicket = myChart.showLoading({
- text: 'loading',
- color: '#4cbbff',
- textColor: '#4cbbff',
- maskColor: 'rgba(0, 0, 0, 0.9)',
- }); */
- //指定图表的配置项和数据
- option = {
- title: {
- text: '文本分析算法词云'
- },
- tooltip:{
- trigger:'axis'
- },
- toolbox: {
- show: true,
- feature:{
- mark:{show:true},
- dataView:{show:true,readOnly:false},
- magicType:{show:true,type:['line','bar']},
- restore:{show:true},
- saveAsImage:{show:true}
- }
- },
- series: [{
- name: '词云',
- type: 'wordCloud',
- size: ['80%', '80%'],
- textRotation : [0, 45, 90, -45],
- textPadding: 0,
- autoSize: {
- enable: true,
- minSize: 14
- },
- data:[
- {
- name: "质量",
- value: 6564,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "稽查",
- value: 4181,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "流程",
- value: 3386,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "核实",
- value: 2655,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "现场",
- value: 2467,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "管理",
- value: 2244,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "用户",
- value: 1898,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "系统",
- value: 1484,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "整改",
- value: 1112,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "电力系统",
- value: 965,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "河南供电局",
- value: 847,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "交变电高压线路",
- value: 582,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "Lewis Hamilton",
- value: 555,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "KXAN",
- value: 550,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "Mary Ellen Mark",
- value: 462,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "Farrah Abraham",
- value: 366,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "Rita Ora",
- value: 360,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "Serena Williams",
- value: 282,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "NCAA baseball tournament",
- value: 273,
- itemStyle: createRandomItemStyle()
- },
- {
- name: "Point Break",
- value: 265,
- itemStyle: createRandomItemStyle()
- }
- ]
- }]
- };
- option2 = {
- title: {
- text: '热词分布'
- },
- tooltip : {
- trigger: 'axis',
- axisPointer : {
- type: 'shadow'
- }
- },
- legend: {
- data:['稽查工单','隐患问题库','典型案例库'],
- axisLabel:{
- show:true,
- textStyle:{
- fontSize:16
- }
- }
- },
- toolbox: {
- show : true,
- orient : 'vertical',
- y : 'center',
- feature : {
- mark : {show: true},
- magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
- restore : {show: true},
- saveAsImage : {show: true}
- }
- },
- calculable : true,
- xAxis : [
- {
- type : 'category',
- data : ["郑州","平顶山","商丘","洛阳","信阳","安阳","驻马店","新乡","开封","许昌","南阳","焦作","漯河","濮阳","周口","鹤壁","三门峡","济源"],
- axisLabel:{
- show:true,
- textStyle:{
- fontSize:16
- }
- }
- }
- ],
- yAxis : [
- {
- type : 'value',
- splitArea : {show : true},
- axisLabel:{
- show:true,
- textStyle:{
- fontSize:16
- }
- }
- }
- ],
- grid: {
- x2:40
- },
- series : [
- {
- name:'稽查工单',
- type:'bar',
- stack: '总量'
- },
- {
- name:'隐患问题库',
- type:'bar',
- stack: '总量'
- },
- {
- name:'典型案例库',
- type:'bar',
- stack: '总量',
- itemStyle:{
- normal:{
- label:{
- show:true,
- position:'top',
- formatter:'{c}',
- fontSize:16
- }
- }
- }
- }
- ]
- };
- option3 = {
- title : {
- text: '一周内热词变化',
- subtext: '测试数据'
- },
- tooltip : {
- trigger: 'axis'
- },
- legend: {
- data:['最高热词','最低热词']
- },
- toolbox: {
- show : true,
- feature : {
- mark : {show: true},
- dataView : {show: true, readOnly: false},
- magicType : {show: true, type: ['line', 'bar']},
- restore : {show: true},
- saveAsImage : {show: true}
- }
- },
- calculable : true,
- xAxis : [
- {
- type : 'category',
- boundaryGap : false,
- data : ['周一','周二','周三','周四','周五','周六','周日']
- }
- ],
- yAxis : [
- {
- type : 'value',
- axisLabel : {
- formatter: '{value}'
- }
- }
- ],
- series : [
- {
- name:'最高热词',
- type:'line',
- data:[114, 131, 125, 213, 412, 143, 310],
- markPoint : {
- data : [
- {type : 'max', name: '最大值'},
- {type : 'min', name: '最小值'}
- ]
- },
- markLine : {
- data : [
- {type : 'average', name: '平均值'}
- ]
- }
- },
- {
- name:'最低热词',
- type:'line',
- data:[114, 131, 125, 213, 412, 143, 310],
- markPoint : {
- data : [
- {name : '周最低', value : 114, xAxis: 0, yAxis: 1.5}
- ]
- },
- markLine : {
- data : [
- {type : 'average', name : '平均值'}
- ]
- }
- }
- ]
- };
- option4 = {
- title : {
- text: '热词层级',
- subtext: '测试数据'
- },
- tooltip : {
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c} ({d}%)"
- },
- legend: {
- orient : 'vertical',
- x : '0px',
- y : '60px',
- data:['直达','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
- },
- toolbox: {
- show : true,
- feature : {
- mark : {show: true},
- dataView : {show: true, readOnly: false},
- magicType : {
- show: true,
- type: ['pie', 'funnel']
- },
- restore : {show: true},
- saveAsImage : {show: true}
- }
- },
- calculable : false,
- series : [
- {
- name:'访问来源',
- type:'pie',
- selectedMode: 'single',
- radius : [0, 70],
- // for funnel
- x: '20%',
- width: '40%',
- funnelAlign: 'right',
- max: 1548,
- itemStyle : {
- normal : {
- label : {
- position : 'inner'
- },
- labelLine : {
- show : false
- }
- }
- },
- data:[
- {value:335, name:'典型案例库'},
- {value:679, name:'隐患问题库'},
- {value:1548, name:'稽查工单', selected:true}
- ]
- },
- {
- name:'访问来源',
- type:'pie',
- radius : [100, 140],
- // for funnel
- x: '60%',
- width: '35%',
- funnelAlign: 'left',
- max: 1048,
- data:[
- {value:335, name:'直达'},
- {value:310, name:'邮件营销'},
- {value:234, name:'联盟广告'},
- {value:135, name:'视频广告'},
- {value:1048, name:'百度'},
- {value:251, name:'谷歌'},
- {value:147, name:'必应'},
- {value:102, name:'其他'}
- ]
- }
- ]
- };
- var series = option["series"];
- var series2 = option2["series"];
- var loc = 0;
- var fun = function (params) {
- var data = 0;
- for(var i=0,len = series2.length;i<len;i++){
- data += series2[i].data[loc];
- }
- loc += 1;
- return data
- }
- //设置每种类别的值
- series2[0]['data'] = [320, 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
- series2[1]['data'] = [320, 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
- series2[2]['data'] = [320, 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
- //加载页面时候替换最后一个series的formatter
- series2[series2.length-1]["itemStyle"]["normal"]["label"]["formatter"] = fun
- //使用刚指定的配置项和数据显示图表
- //clearTimeout(loadingTicket);
- loadingTicket = setTimeout(function (){
- //myChart.hideLoading();
- myChart.setOption(option);
- //myChart2.hideLoading();
- myChart2.setOption(option2);
- myChart3.setOption(option3);
- myChart4.setOption(option4);
- },300);
- myChart.connect(myChart2);
- myChart2.connect(myChart);
- setTimeout(function (){
- window.onresize = function () {
- myChart.resize();
- myChart2.resize();
- }
- },200)
- myChart.on('click', function (params) {
- //获取随机数
- var jc = Math.random();
- var yh = (1 - jc) * Math.random();
- var dx = (1 - jc) - yh;
- 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]
- 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]
- 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]
- var loc = 0;
- var fun = function (params) {
- var data = 0;
- for(var i=0,len = series2.length;i<len;i++){
- data += series2[i].data[loc];// - parseInt(Math.random() * 100)
- }
- loc += 1;
- return data
- }
- //加载页面时候替换最后一个series的formatter
- series2[series2.length-1]["itemStyle"]["normal"]["label"]["formatter"] = fun
- myChart2.setOption(option2);
- });
- myChart2.on('click', function (params){
- series[series.length-1]['data'][0]['name'] = '资产'
- series[series.length-1]['data'][0]['value'] = parseInt(Math.random() * 10000)
- myChart.setOption(option);
- })
- </script>
- </body>
- </html>
三.效果
ECharts大屏可视化【词云,堆积柱状图,折线图,南丁格尔玫瑰图】的更多相关文章
- ECharts学习(2)--饼状图之南丁格尔图
1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...
- 基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化
前言 在大数据盛行的现在,大屏数据可视化也已经成为了一个热门的话题.大屏可视化可以运用在众多领域中,比如工业互联网.医疗.交通.工业控制等等.将各项重要指标数据以图表.各种图形等形式表现在一个页面上, ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- Echarts大数据可视化物流航向省份流向迁徙动态图,开发全解+完美参数注释
最近在研究Echarts的相关案例,毕竟现在大数据比较流行,比较了D3.js.superset等相关的图表插件,还是觉得echarts更简单上手些. 本文是以原生JS为基础,如果使用Vue.js的话, ...
- 【拖拽可视化大屏】全流程讲解用python的pyecharts库实现拖拽可视化大屏的背后原理,简单粗暴!
"整篇文章较长,干货很多!建议收藏后,分章节阅读." 一.设计方案 整体设计方案思维导图: 整篇文章,也将按照这个结构来讲解. 若有重点关注部分,可点击章节目录直接跳转! 二.项目 ...
- Python 词云可视化
最近看到不少公众号都有一些词云图,于是想学习一下使用Python生成可视化的词云,上B站搜索教程的时候,发现了一位UP讲的很不错,UP也给出了GitHub上的源码,是一个很不错的教程,这篇博客主要就是 ...
- Scrapy+eChart自动爬取生成网络安全词云
因为工作的原因,近期笔者开始持续关注一些安全咨询网站,一来是多了解业界安全咨询提升自身安全知识,二来也是需要从各类安全网站上收集漏洞情报. 作为安全情报领域的新手,面对大量的安全咨询,多少还是会感觉无 ...
- flex布局构建大屏框架并支持翻页动画、滚动表格功能
本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效 ...
- vue+echarts可视化大屏,全国地图下钻,页面自适应
之前写过一篇关于数据大屏及地图下钻的文章 https://www.cnblogs.com/weijiutao/p/13977011.html ,但是存在诸多问题,如地图边界线及行政区划老旧,无法自适应 ...
随机推荐
- ASP.NET Core中的运行状况检查
由卢克·莱瑟姆和格伦Condron ASP.NET Core提供了运行状况检查中间件和库,用于报告应用程序基础结构组件的运行状况. 运行状况检查由应用程序公开为HTTP终结点.可以为各种实时监视方案配 ...
- odoo开发笔记 -- 提高访问安全性的一种方式
场景描述: 最近在做项目的过程中,需要需要将odoo应用集成到其他系统中, 在对方的系统中点击我们的应用,打开对应系统,但是界面不做跳转,在当前页面打开,并且浏览器地址栏只显示IP+应用名,不让显示o ...
- mongo 分片机如何建立库和实例(数据表)
mongo分片创建表和实例 第一步:首先在admin账户下: mongo 'mongodb://root:abcccSRP@s-2ze333323gggg.mongodb.rds.aliyuncs.c ...
- CentOS使用yum安装最新版nginx步骤
sudo yum install yum-utilsvi /etc/yum.repos.d/nginx.repo 输入: [nginx-stable]name=nginx stable repoba ...
- CSAGAN:LinesToFacePhoto: Face Photo Generation from Lines with Conditional Self-Attention Generative Adversarial Network - 1 - 论文学习
ABSTRACT 在本文中,我们探讨了从线条生成逼真的人脸图像的任务.先前的基于条件生成对抗网络(cGANs)的方法已经证明,当条件图像和输出图像共享对齐良好的结构时,它们能够生成视觉上可信的图像.然 ...
- PHP计算思源字体宽度, 并把文字绘制到图片上
2019-6-19 9:18:54 星期三 思源字体是一套开源的字体, 那字体宽度是多少呢? 测试场景, 将包含汉字, 数字, 大小写字符的一段文字写到图片中去, 但不能出现超出的情况, 这就要计算 ...
- Performance-Schema
https://yq.aliyun.com/articles/640181?spm=a2c4e.11153940.0.0.347359d3DAu7sW MySQL Performance-Schema ...
- a dynamic resume
介绍 发现一款开源的动画简历工程, 很是吸引眼球, 分享出来. 技术: 1. npm工程管理 2. vuejs 设计上,将工程分为两个组件: 0.程序入口组件 1. 编辑器组件 2. 简历展示组件 流 ...
- POI 读取Excel文件 并解析JSON数据
package skuPrice; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundEx ...
- 将网页html文件离线下载保存到本地的方法
(1)复制想要离线的网页的网址: 范例:http://bbs.xyaz.cn/thread-52540-1-1.html (2)将网址放入迅雷中,让其将html文件下载下来. (3)下载结果