动态数据下的Echarts可视化平台构建

研究思路

1.引用：Echarts是百度开源的可视化产品，以国外zrender开源的javascript的可视化插件包为基础，加工整理成新的图形js包，新的js包对应不同的数据图形。

2.目的：一份新的数据放置后台（需特定的数据结构），前端需要将数据进行可视化的展示。

3.方法：html脚本，结合开源的可视化js的图形包进行调用，再结合数据读取的插件包，将数据的读取制作成通用性的数据读取脚本。

环境准备

Tomcat+jsp+js,产生脚本如下:

其中，jquery-1.8.2.min.js和project.min.js是固定的程序包，可进行相应的下载。数据内容情况如下：（以类json的格式进行）

构建脚本内容

其中View.html脚本内容如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>可视化</title><!-- 引入 echarts.js --><script src="project.min.js"></script><script type="text/javascript" src="jquery-1.8.2.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例// f();// function f() {//     var myChart = echarts.init(document.getElementById('main'));//     // 指定图表的配置项和数据//     debugger;//     $.getJSON("try.txt", function (data){//         console.log(data);//         myChart.setOption(data);//     });// }$(function () {var myChart = echarts.init(document.getElementById('main'));$.ajax({type: "POST",dataType: "json",url: "data.txt",success: function (result) {var project;var kk;var c=[];var b=[];for(var i in result){project=result[i].name;c[i]=project;b[i]=result[i].sex;}var option = {title: {text: '各科室周内手术情况统计'},tooltip: {},legend: {data:['销量']},xAxis: {data:c},yAxis: {},series: [{name: '人数',type: 'bar',data: b}]};myChart.setOption(option);}});});</script></body>
</html>

产生结果

其它可构建的Echarts扩展

参考链接：https://www.echartsjs.com/zh/builder.html

动态数据下的Echarts可视化平台构建相关推荐

智维数据nCompass防火墙策略可视化平台发布
1 防火墙策略收敛的困境: "一个月只能收敛一条策略, 太影响防火墙性能了,我们不敢再开了!" 安全策略的配置是发挥防火墙防护作用的关键,精细化安全策略配置成为应对威胁的重要手段 ...
利用Ajax实现数据的同步传输，从mysql中提取数据，通过echarts可视化
如何将mysql数据库中的方式通过echarts可视化呢,以下面这个简单的例子向大家进行演示: 步骤一:mysql的创表和插入数据,当然这些数据也可以是你通过爬虫抓取的. 步骤二: 创 ...
【硕士论文】《动态场景下的语义三维地图构建》西南科技大学余东应
概述主要研究机器人在未知动态场景中实现鲁棒的定位及语义地图构建针对动态场景定位.鲁棒性差.针对三维地图实用价值不高的问题. 动态场景下定位对特征点匹配算法做出改进,提出自适应窗隔匹配模型,可剔除 ...
基于分布式的智联招聘数据的大屏可视化分析与预测
项目需求分析及体系架构 1.1项目介绍互联网成了海量信息的载体,目前是分析市场趋势.监视竞争对手或者获取销售线索的最佳场所,数据采集以及分析能力已成为驱动业务决策的关键技能.<计算机行业岗位招 ...
数据可视化平台 vue+node+webpack+echarts+d3
前言文章写于 2020年3月,后边只有简单的补充更新历程 ~ 随着公司的发展和进步,数据大屏的业务日益增长,公司目前的做法大致可以分为两种人工标配 or 第三方工具 . 人工:很简单,一个前端配备 ...
[Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化
前一篇文章 "[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区" 主要是通过Echarts可视化介绍入门知识.中国地图和贵州地区各省份的数据分析,其中贵州地图才是它 ...
实现Java Web开发的关于echarts可视化动态数据展示
实现Java Web开发的关于可视化动态数据展示 echarts是一个实现动态数据展示最方便的图形化展示工具.它能够完成数据实时传递更新并且能够完成页面直观的展示.最开始时,echarts是由百度设计 ...
“大数据时代下的地理信息可视化：ECharts地图和数据面板实践“
数据可视化是一种数据分析技术,它通过将数据转化为图形或图表等可视化方式,以便更好地理解和解释数据.在实际应用中,数据可视化被广泛用于数据监控.业务分析.决策支持等领域.而ECharts是一款优秀的数据 ...
基于 HTML+ECharts 实现物流大数据可视化平台（含源码）
源码下载地址在文章末尾! 效果演示智慧仓储系统: 物流大数据服务平台: 物流云数据可视化平台: 智慧物流服务中心: 物联网数据统计平台: 源码下载地址 https://download.csdn.n ...