快速基于echarts的大数据可视化

原创 2015年07月09日 15:32:31

[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');
		}
	});
}

展示效果图:


快速基于echarts的大数据可视化

[Author]: kwu 快速基于echarts的大数据可视化,echarts纯粹的js实现的图表工具,快速开发的步骤如下:...
  • kwu_ganymede
  • kwu_ganymede
  • 2015年10月13日 13:17
  • 1696

Vue2+Echarts实现多种图表数据可视化Dashboard详解(附源码)

数据可视化  将数据通过图表的形式展现出来将大大的提升可读性和阅读效率 本例包含柱状图、折线图、散点图、热力图、复杂柱状图、预览面板等 技术栈 vue2.xvuex 存储公共变量,如色值等...
  • Lucky_LXG
  • Lucky_LXG
  • 2017年03月30日 08:42
  • 3312

快速基于echarts的大数据可视化

[Author]: kwu 快速基于echarts的大数据可视化,echarts纯粹的js实现的图表工具,快速开发的步骤如下:...
  • kwu_ganymede
  • kwu_ganymede
  • 2015年10月13日 13:17
  • 1696

厦门大学-林子雨-大数据技术原理与应用-上机练习-数据可视化工具魔镜和基于ECharts可视化库的图表制作

  • 2016年01月21日 17:50
  • 1.19MB
  • 下载

大数据时代的图表可视化利器——highcharts,D3和百度的echarts

大数据时代的图表可视化利器——highcharts,D3和百度的echarts 还记得阿里巴巴那个令人澎湃激情的双十一吗?还记得淘宝生动形象地把你的的消费历程一一地展示给你看...
  • dufufd
  • dufufd
  • 2017年11月28日 10:21
  • 232

大数据时代的图表可视化利器——highcharts,D3和百度的echarts

还记得阿里巴巴那个令人澎湃激情的双十一吗?还记得淘宝生动形象地把你的的消费历程一一地展示给你看吗?还记得那些酷炫拽的it报告图表吗?在这个大数据越来越盛行的年代,怎样去表达一些用户的关系,人物的关联,...
  • minidrupal
  • minidrupal
  • 2014年12月25日 22:37
  • 11538

Echarts图前端数据可视化展示

  • 2017年06月11日 11:26
  • 7KB
  • 下载

探码TMDash大数据小数据快速实现可视化分析

数据可视化是当下火热的大数据应用技术之一,很多大数据分析工具都注重开发数据可视化的功能模块。数据可视化及其技术研究和应用开发,已经从根本上改变了我们对数据和数据分析工具的理解,数据可视化对大数据发展的...
  • liju_yang
  • liju_yang
  • 2017年12月25日 14:57
  • 12

前端数据可视化插件:Highcharts、Echarts和D3

前端数据可视化插件有很多,但我用过的只有Highcharts(https://www.hcharts.cn/)、Echarts(http://echarts.baidu.com/)和D3(https:...
  • u013511989
  • u013511989
  • 2017年05月16日 15:21
  • 2965

Echarts数据可视化series-scatter散点图,开发全解+完美注释

版权声明:本文为博主原创文章,转载请注明来源。开发合作联系luanpenguestc@sina.com 全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解  E...
  • shandian84
  • shandian84
  • 2017年12月31日 20:30
  • 35
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:快速基于echarts的大数据可视化
举报原因:
原因补充:

(最多只允许输入30个字)