高速基于echarts的大数据可视化
2023-09-11 14:14:09 时间
[Author]: kwu
高速基于echarts的大数据可视化,echarts纯粹的js实现的图表工具。高速开发的过程例如以下:
1、引入echarts的依赖js库
<script type="text/javascript" src="js/esl/esl.js"></script> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript" src="js/jquery.js"></script>
2、设置展示的div
<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height: 300px"></div>
3、画图的JS
var myChart; var option; // 绘图 function drawCharts(echartsHomePath) { // 路径配置 require.config({ paths : { echarts : echartsHomePath +'js' } }) // 使用 require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], function( ec) { myChart = ec.init(document.getElementById('main')); //官网复制option 開始 option = { 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', data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } } ] }; //官网复制option 结束 myInterval(restPath); }); } //填充数据 function setResult(result, option, myChart) { if (result) { option.title.text = "每日apputrack趋势图"; option.title.subtext = "apputrack"; option.legend.data[0] = "apputrack"; option.xAxis[0].data = result.day; option.series[0].name = "apputrack"; option.series[0].data = result.cnt; myChart.setOption(option); } }
4、ajax获取restful数据
//ajax获取数据 function myInterval(restPath) { $.ajax({ type : 'get',// jquey是不支持post方式跨域的 async : false, url : baseUrl +restPath, // 跨域请求的URL dataType : 'jsonp', jsonp : "callback",// 服务端用于接收callback调用的function名的參数 success : function(result) { setResult(result, option, myChart); }, error : function() { alert('fail'); } }); }
5、定时调度及參数设置
//ajax获取数据 function myInterval(restPath) { $.ajax({ type : 'get',// jquey是不支持post方式跨域的 async : false, url : baseUrl +restPath, // 跨域请求的URL dataType : 'jsonp', jsonp : "callback",// 服务端用于接收callback调用的function名的參数 success : function(result) { setResult(result, option, myChart); }, error : function() { alert('fail'); } }); }
展示效果图:
相关文章
- vue2.0 自定义 饼状图 (Echarts)组件
- uni-app - 使用echarts 图表(H5、APP)
- echarts legend 的单选模式以及轮播技巧
- ECharts实现数据超出Y轴最大值max但不隐藏
- Echarts 数据可视化 5分钟【带你玩转】
- 基于Vue+Echarts 构建可视化大数据平台【100010416】
- 基于JavaScript+Koa2实现 Echarts 电商平台数据可视化大屏全栈【100010415】
- 【ECharts】echarts数据化图表入门级教程(附10个案例)
- Vue+Echarts监控大屏实例一:软件系统运行监控模板实例
- Echarts使用dataset数据集管理数据
- echarts使用记录(二)legend翻页,事件,数据集,设置y轴最大/小值,让series图形从右侧出往左移动
- Web 插件 之 ECharts 实现中国地图数据的简单展示实现
- Web 插件 之 ECharts 可视化图表库简单介绍和使用
- Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表、地图)
- echarts仪表盘增加图例
- 在微信小程序上做一个「博客园年度总结」:在小程序上使用echarts
- Echarts图表控件使用总结2(Line,Bar)—问题篇
- vue-element-admin 项目引入Echarts中的dataTool; echarts.dataTool.prepareBoxplotData is not a function
- Echarts绘制地图柱状图
- Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示
- ECharts的介绍和使用方法,以及其他常见的数据可视化库介绍