百度Echarts的使用

南疆战士

浏览: 150500 次
性别:
来自: 南京

最近访客更多访客>>

ganxueyun

mhx1535

fuyongde

夏文权

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Echarts
HTML5
WEB

Echarts Html5 Web

近期LZ项目组中需要绘制不少图形化的报表，越来越多的需求，使得我们最终选择了百度echarts这款插件。Echarts基于Html5的Canvas绘图工具，像素级的渲染效果使得绘制的图像几近完美，Echarts目前的模型库已经相当全面，涉及地图，折线图，柱状图，饼状图，雷达图，仪表盘，漏斗图。。。可谓应有尽有，再加上Echarts代码开源，源码和API文档在百度官网可以直接下载，而且版本持续更新中，对于有前端图表报表需求的开发人员来说，绝对是一个福音。

好了，废话不多说，现在进入正题，Echarts如何使用呢，首先，到官网http://echarts.baidu.com/，点击下载->echarts-x.x.x下载最近版本，目前的最新版本是2.2.5，里面有源码，文档，样例等文件，下载下来即可自行学习，而我们真正使用的部分是echarts-x.x.x\build\dist目录下的所有文件，使用方法很简单，将上述文件放置在项目中的js存放目录中，然后就是页面引用了，引用样例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="./www/js/echarts.js"></script>

虽然百度Echarts是基于html5开发的，但是上述例子中的<!--[if lt IE 9]>部分的代码支持IE9以下版本自动转化

HTML5的标签库，所以实际Echarts可以支持IE6+版本，对于火狐和谷歌版本的支持力度更好。而且Echarts本身并不依赖Jquery等js插件，如果有需要请自行引入。

下面来说说ECharts绘制图表的过程，还是代码开路：

<script type="text/javascript">
	//设置echarts这个变量的地址，实际就是我们引入的echarts的js的目录
	require.config({
		paths:{
			echarts:'<s:url value="/Js/echart"/>'
		}
	});
	//根据不同的需求引入不同的js，如下'echarts/chart/bar'引入了bar.js，就是柱状图的js
	require(			
		[
		 'echarts',
		 'echarts/chart/bar'
		],
		functionName
	);
	function functionName(ec)
	{
		//放置图表的div一定要设置宽度和高度，刚开始使用时，LZ因为这个调试几个钟头。
		myChart = ec.init(document.getElementById("放置图表的div的id"));
		
		option = {
				...
				此处省略一万字
                具体图表渲染代码请到官网样例中获取
			};
		myChart.setOption(option);	
	}	
</scirpt>

下面出一个Echarts不同js对应的图表的分类图

如今的用户对于页面美观度的需求已经超出了我们的想象，一款实用的图表绘制插件营运而生，Echarts的出现势必会打破flash对于前端图表应用的垄断地位，希望有兴趣的童鞋可以学习一下，并把它运用到自己的项目中来。