ECharts（Enterprise Charts 商业产品图表库）初识
一、简介
大数据时代，重新定义图表的时候到了，所以随之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>
剩下的可以在帮助文档的视图展示找自己需要的代码
ECharts（Enterprise Charts 商业产品图表库）初识的更多相关文章
- ECharts一个强大的商业产品图表库
Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构 ...
- 百度Echarts-免费的商业产品图表库
官方网站:http://echarts.baidu.com/ 民间网站:http://fansunion.cn/echarts/ 下载地址:https://codeload.github.com/ec ...
- ECharts JavaScript图表库 ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
- 基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
- 开源的数据可视化JavaScript图表库：ECharts
ECharts (Enterprise Charts 商业产品图表库)是基于HTML5 Canvas的一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽 ...
- ECharts-基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表
ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...
- 三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？
最近阿里正式开源的BizCharts图表库基于React技术栈,各个图表项皆采用了组件的形式,贴近React的使用特点.同时BizCharts基于G2进行封装,Bizcharts也继承了G2相关特性. ...
- 时隔两个月再写的Echarts（Enterprise Charts，商业级数据图表）一文
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...
- 【可视化】DataV接入ECharts图表库 可视化利器强强联手
DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...
随机推荐
- SqlServer2008到期升级企业版 密钥+图解
最近使用SQL Server2008,结果Sql Server Management Studio提示过期了,如图: 遇到如上图情况,需要将SQL Server2008升级维护下,还是输入原来的密钥就 ...
- Echarts3 关系图-力导向布局图
因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...
- 有关binlog的那点事（mysql5.7.13）
binlog作为mysql中最重要的日志之一,能实现异常恢复以及主从复制. 我们主要讨论的是主从复制中的binlog,这里将以mysql5.7.13的源码为主要依据来分析binlog. 在主从复制中, ...
- HTML5的特性,发展,及使用
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #ffffff } p.p2 { margin: 0.0px 0. ...
- SSIS Design7：数据类型的选择
对于SSIS的数据类型,容易遗漏精度的是DateTime,不正确的使用DateTime,time,decimal 等数据类型,可能导致溢出或数据丢失. 1,Variable 和 Parameter的D ...
- UML基础系列：类图
类图描述系统中类的静态结构,它不仅定义系统中的类,描述类之间的联系,如关联.依赖.聚合等,还包括类的内部结构(类的属性和操作).类图描述的是静态关系,在系统的整个生命周期中都是有效的.对象图是类图的实 ...
- 【Win10 应用开发】解决VS 2015 RC不能调试手机应用的问题
VS2015 RC已发布,当然这个版本还不能用于实际生产中,如果你没有测试环境,就等正式版出来,RC都来了,RTM就不远了. 如果你也像老周一样,已经在耍RC版了,你可能会遇到下面问题: 安装Win ...
- Tomcat报java.lang.OutOfMemoryError: Java heap space错误停止运行如何解决
最近开发的一个商业项目,部署完成后,经常出现Tomcat挂掉的现象,报的异常是:java.lang.OutOfMemoryError: Java heap space,上网google了一下,了解了一 ...
- ASP.NET MVC之路由特性以及母版页呈现方式（十二）
前言 这一节我们开始讲讲基础的东西也就是如题目所言,个人觉得当学习或者利用MVC时,必须得知道最新迭代版本新增了什么,至少得知道MVC 3.MVC 4或者MVC 5有什么区别,而不至于当利用到低版本时 ...
- ViewPager+RadioGroup实现标题栏切换,Fragment切换
1.说明: 在使用RadioGroup做标题栏切换的时候,跟ViewPager的滑动有冲突,最后查看了源码+断点调试解决了一些碰到的问题,写一篇博客总结一下,有同样需求的朋友可以借鉴一下,自己以后有用 ...