echarts图表的使用

一、介绍

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

echarts官网：echarts首页

二、使用

由于最近做项目开发需要使用echarts图表，所以抽出时间总结一下echarts图表的用法。

在echarts官网下载使用echarts需要的文件，单文件方式需要一个echarts.js文件，下载地址：echarts.js文件，把文件放到WebRoot下的一个目录中，引入该文件即可使用。由于有的图表需要依赖底层Canvas类库ZRender，并且要使用更丰富的功能或更多图表交互组件也需要依赖底层Canvas类库ZRender，这时需要下载echarts完整文件，下载地址：echarts-master，还需要下载ZRender完整文件，下载地址：zrender-master，然后将zrender-master改名为zrender，echarts-master名字任意，并把他们放到相同目录下，将该目录文件放到WebRoot下的一个目录中，修改配置文件，引入配置文件和esl.js文件，根据需要引入依赖的文件即可使用，具体如下。

新建一个web工程testec

准备：在testec中的WebRoot中新建一个文件夹ui，下载jquery文件放到WebRoot下的ui目录中并在jsp页面引入该文件，由于echarts图表的样式及数据的配置都在option中进行，所以所有图表的option我都抽取放到一个文件cfgopts.js中，在使用之前需要引入该文件，并获取相应图表的option即可。

1、单文件方式引入

准备：在WebRoot下的ui中新建一个文件夹echarts，将下载的echarts-master改名为echarts-3.2.3，将该文件放到echarts文件夹中，把不需要的文件删除，在jsp页面中引入echarts-3.2.3下dist中的echarts.js文件。

(1)、引入文件，在head标签中加入：

<script src="${ctx }/ui/jquery-1.7.2.min.js"></script>
<script src="${ctx }/ui/echarts/echarts-3.2.3/dist/echarts.js"></script>
<script src="${ctx }/ui/echarts/echarts-3.2.3/options/cfgopts.js"></script>

(2)、准备一个div标签：<div id="pie" style="width: 600px;height: 400px;"></div>

(3)、开始使用

	<script>
		var pieChart;
		$(function() {
			pieChart = echarts.init(document.getElementById("pie"));

			showPie();
		});

		function showPie() {
			var pieOpt = getPieOpt();
			pieOpt.title.text = '饼形图';
			pieOpt.series[0].name = '饼形图';
			pieChart.setOption(pieOpt);
		}
	</script>

运行testec，在浏览器地址输入：http://localhost:8080/testec/ecjsp/testPie.jsp

运行效果：