一、简介
大数据时代,重新定义图表的时候到了,所以随之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="width: 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>
剩下的可以在帮助文档的视图展示找自己需要的代码
时间: 2024-11-10 11:42:37