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 ,但是存在诸多问题,如地图边界线及行政区划老旧,无法自适应 ...
随机推荐
- Transaction 那点事儿
Transaction 那点事儿 https://my.oschina.net/huangyong/blog/160012
- django使用mysql出现警告Warning: (3135, "'NO_ZERO_DATE', 'NO_ZERO_IN_DATE' and 'ERROR_FOR_DIVISION_BY_ZERO' sql modes should be used with strict mode. They will be merged with strict mode in a future release
django使用mysql出现警告 Warning: (3135, "'NO_ZERO_DATE', 'NO_ZERO_IN_DATE' and 'ERROR_FOR_DIVISION_BY ...
- Python用积分思想计算圆周率
[文本出自天外归云的博客园] 早上起来突然想求圆周率,1单位时圆的面积. 代码如下: from math import pow, sqrt def calc_circle_s_with(r, dy, ...
- Ubuntu 16.04 Roboware Turtlesim 测试
博客参考:https://www.jianshu.com/p/5509c8ba522b?utm_campaign 利用Turtlesim,编写简单的消息发布器和订阅器 1. Twist消息,它的Top ...
- MyBatis 返回 List mapperxml怎么写
转: MyBatis 返回 List mapperxml怎么写? 原创 微wx笑 发布于2018-06-20 13:59:23 阅读数 10742 收藏 展开 有时候,我们不需要整个表的所有字段,而是 ...
- Session覆盖测试(要验证码提交到后续页面操作的 绕过去的场景)
测试原理和方法 找回密码逻辑漏洞测试中也会遇到参数不可控的情况,比如要修改的用户名或者绑定 的手机号无法在提交参数时修改,服务端通过读取当前session会话来判断要修改密码的账 号,这种情况下能否对 ...
- Operation之过滤操作符
filter 该操作符就是用来过滤掉某些不符合要求的事件 Observable.of(2, 30, 22, 5, 60, 3, 40, 9) .filter{ $0 > 10 } .subscr ...
- Spring Boot 的Logback
Spring Boot 默认使用Logback记录日志 Spring Boot starter 都会默认引入spring-boot-starter-logging,不需要再引入 日志级别从高到低:TR ...
- [QT] - HTTP文件传输服务器#工程源码
简介: 大学时期学习弄的一个小软件,当初做的目的是在实验室的局域网内方便同学之间文件的传输,软件的几个功能截图如正文所示,文末提供工程源码文件,感谢支持! 功能截图: [ 打开软件,选择IP及需绑定的 ...
- Windows下编译Redis5.0.5
先去弄Cygwin环境 http://www.cygwin.com/ 下载完成 打开 下一步 下一步 下一步 下一步 下一步,出现一个界面,让你添加地址,你打开官网,选择mirror sites,点击 ...