一、简介
大数据时代，重新定义图表的时候到了，所以随之ECharts就随之出现了。
ECharts（Enterprise Charts 商业产品图表库） 是基于Canvas的，纯Javascript 的图表库，提供直观，生动，可交互，可个性化定制的
数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
ECharts 是指 Enterprise Charts（商业产品图表库），提供商业产品常用图表库，底层基于 ZRender，创建了坐标系，图例，提示，工
具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局
图，同时支持任意维度的堆积和多图表混合展现。
二、简单的例子介入学习
需要导入jar
学习方法：http://echarts.baidu.com/官网
柱状图页面展示
三、如上图所示简单的jsp页面访问（根据帮助文档查看属性）-----需要一个ehcache-1.2.3.jar
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>柱状图</title> <!-- 引入echarts.js --> <script type="text/javascript" src="<%=path%>/js/echarts.js"></script> </head> <body> <!--为ECharts准备一个具有大小的Dom--> <div id="main" style=" 900px;height: 600px"></div> </body> <script type="text/javascript"> //基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById("main")); var option = { //标题组件 title : { text : '公司的星期销量图', subtext : '纯属虚构', left : 'left', textStyle : { fontSize : 20 }, }, //图例 legend : { data : [ '销量' ] }, //颜色 color : [ 'red' ], //提示框组件 tooltip : { trigger : 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'|'cross' } }, //工具栏 toolbox : { show : true,//是否显示 feature : { //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。 dataView : { show : true, readOnly : false }, //动态类型切换 magicType : { show : true, type : [ 'pie', 'bar' ] }, dataZoom: { show:true }, //配置项还原 restore : { show : true }, //保存为图片 saveAsImage : { show : true } } }, //x轴 xAxis : [ { position : 'bottom',//x 轴的位置。可选：'top','bottom' type : 'category', data : [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ], axisTick : { alignWithLabel : true } } ], //y轴 yAxis : [ { type : 'value' } ], //系列列表 series : [ { name : '销量', type : 'bar', barWidth : '60%', data : [ 10, 52, 200, 334, 390, 330, 220 ], //图表标注 markPoint : { data : [ { type : 'max', name : '最大值' }, { type : 'min', name : '最小值' } ] }, //图表标线 markLine : { data : [ { type : 'average', name : '平均值' } ] } }, { name : '产量', type : 'line', data : [ 50, 55, 200, 340, 390, 400, 220 ] } ], }; //使用个刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </html>
剩下的可以在帮助文档的视图展示找自己需要的代码
