Echarts 的样例
jsp页面：
<%@ 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>
<meta charset="utf-8">
<title>Echarts</title> <script type="text/javascript" src="js/esl.js"></script> <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
</head>
<body>
<div id="main" style="height:500px"></div> <div>
<span id='wrong-message' style="color:red"></span>
<span id='hover-console' style="color:#1e90ff"></span>
<span id='console' style="color:#1e90ff">Event Console</span>
</div> <!--echarts 包 -->
<script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript"> //路径配置
require.config({
paths:{
//zrender:'./zrender/src',
echarts: './js',
//"jquery":"./js/jquery-2.1.0.min"
}
}); var data_array=[12,47,39,45,30,20];
var str_array=["江西","福建","北京","黑龙江","海南","安徽"]; //设置主要样式
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
//'jquery'
],
function(ec){
//初始化echart对象
var myChart = ec.init(document.getElementById('main'));//ec.init( $("#main")));// var option={ //标题
title:{
show:true,
//主标题
text:"省份基地数量 ",
link:"http://www.baidu.com",
target:"blank",
textStyle:{
color:"#9932CC"
},
//副标题
subtext:"**机密**",
sublink:'www.google.com',
subtarget:'self',
subtextStyle:{
color:"#8F8F8F",
fontSize:16,
align:'center'
},
//位置
x:'left',
y:'top',
textAlign:'left',
//颜色
backgroundColor:"#FFD39B",
padding:2,
//主副标题纵向间隔
itemGap:3,
borderWidth:1
}, //提示栏
tooltip:{
show:true,
//zlevel:1,
// z:3,
//触发类型
trigger:'axis',//默觉得'item'
//延时
//showDelay:1000,
enterable:true,
//颜色
backgroundColor:"#AB82FF", testStyle:{
color: 'yellow',
decoration: 'none',
fontFamily: 'Verdana, sans-serif',
fontSize: 15,
fontStyle: 'italic',
fontWeight: 'bold'
},
//坐标轴指示器
axisPointer:{
type: 'line',
lineStyle: {
color: '#48b',
width: 2,
type: 'solid'
},
crossStyle: {
color: '#1e90ff',
width: 1,
type: 'dashed'
},
shadowStyle: {
color: 'rgba(150,150,150,0.3)',
width: 'auto',
type: 'default'
}
}, //内容格式化
formatter:function(params,ticket,callback)
{
//处理提示框显示的信息
console.log(params);
var res=params[0].name+'<br/>';
for(var i=0;i<params.length;i++)
{
res+=params[i].seriesName+':'+params[i].value; }
//模拟异步回调
setTimeout(function()
{
callback(ticket,res); },500)
return "loading";
} //formatter: "{b}<br/>{a}:{c}"
}, //工具箱
toolbox:{
show:true,
orient:'vertical',
x:'right',
y:'top',
itemSize:20, //特征
feature:{
mark : {
show : true,
title : {
mark : '辅助线开关',
markUndo : '删除辅助线',
markClear : '清空辅助线'
},
lineStyle : {
width : 2,
color : '#1e90ff',
type : 'dashed'
}
},
dataZoom : {
show : true,
title : {
dataZoom : '区域缩放',
dataZoomReset : '区域缩放后退'
}
},
dataView : {
show : true,
title : '数据视图',
readOnly: false,
lang: ['数据视图', '关闭', '刷新']
},
magicType: {
show : true,
title : {
line : '折线图切换',
bar : '柱形图切换',
stack : '堆积',
tiled : '平铺',
force: '力导向布局图切换',
chord: '和弦图切换',
pie: '饼图切换',
funnel: '漏斗图切换'
},
//为各个切换试图单独设置option
/* option: {
// line: {...},
// bar: {...},
// stack: {...},
// tiled: {...},
// force: {...},
// chord: {...},
// pie: {...},
// funnel: {...}
},*/
type : ['line', 'bar' ,'stack', 'tiled']
},
restore : {
show : true,
title : '还原'
},
saveAsImage : {
show : true,
title : '保存为图片',
type : 'png',
lang : ['点击保存']
}
} /* feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
} */
}, //图例
legend: {
data:str_array,//['销量']
//selectMode:'multiple',
//selected:{
// '江西':false
// }
},
xAxis:[
{
type:'category',
data:str_array
}
],
yAxis:[
{
type:'value'
}
],
/* timeline:{ //时间轴
data:[
'2002-01-01','2003-01-01','2004-01-01',
'2005-01-01','2006-01-01','2007-01-01',
],
checkpointStyle:{
symbol : 'auto',
symbolSize : 'auto',
color : 'auto',
borderColor : 'auto',
borderWidth : 'auto',
label: {
show: false,
textStyle: {
color: 'red'
}
}
} label : {
formatter : function(s) {
return s.slice(0, 4);
}
},
autoPlay : true,
playInterval : 1000 }, */ //数据系列，一个图表可能包括多个系列，每个系列可能包括多个数据
series:[
{
name:"数量",
type:"bar",
data:data_array,
itemStyle: {normal: {areaStyle: {type: 'default'}}} },
{
name:"数量",
type:"line",
data:data_array } ] };//end of option myChart.setOption(option); //事件命名统一挂载到require('echarts/config').EVENT
var ecConfig = require('echarts/config');
//绑定事件
myChart.on(ecConfig.EVENT.CLICK, eConsole1); //事件响应函数处理
function eConsole1(param) {
var mes = '【' + param.type + '】';
if (typeof param.seriesIndex != 'undefined') {
mes += ' seriesIndex : ' + param.seriesIndex;
mes += ' dataIndex : ' + param.dataIndex;
}
if (param.type == 'hover') {
document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
alert(mes);
}
else {
document.getElementById('console').innerHTML = mes;
alert(mes);
}
console.log(param);
}; }//end of function );//end of require </script>
</body>
</html>
Echarts 的样例的更多相关文章
- echarts 应用数个样例
应用一:环形图和饼图嵌套 先说明一下内部文件分布: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGV4dGJveQ==/font/5a6L5L2T/fo ...
- ECharts组件应用样例代码
一.从Echarts官网上下载最新版本组件 Echarts是百度开发的开源Web图表组件,界面美观,使用简单.组件下载地址:http://echarts.baidu.com/echarts2/doc/ ...
- C++的性能C#的产能?! - .Net Native 系列《三》：.NET Native部署测试方案及样例
之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...
- MarkDown+LaTex 数学内容编辑样例收集
$\color{green}{MarkDown+LaTex 数学内容编辑样例收集}$ 1.大小标题的居中,大小,颜色 [例1] $\color{Blue}{一元二次方程根的分布}$ $\color{R ...
- 33个超级有用必须要收藏的PHP代码样例
作为一个正常的程序员,会好几种语言是十分正常的,相信大部分程序员也都会编写几句PHP程序,如果是WEB程序员,PHP一定是必备的,即使你没用开发过大型软件项目,也一定多少了解它的语法. 在PHP的流行 ...
- 关于peersim样例配置文件的超详细解读（新手勿喷）
相信很多兄弟一开始接触peersim,对配置文件还是有点不适应,我看了好久的样例的配置文件,一层层去找对应的文件的方法,终于好像悟懂了一点,记下来以后回顾. 贴上代码,一点点分析. 首先要说下所谓的配 ...
- hdu 1003 MAX SUM 简单的dp，测试样例之间输出空行
测试样例之间输出空行,if(t>0) cout<<endl; 这样出最后一组测试样例之外,其它么每组测试样例之后都会输出一个空行. dp[i]表示以a[i]结尾的最大值,则:dp[i ...
- CloudSim样例分析
自带八个样例描述: cloudsim-2.1.1\examples目录下提供了一些CloudSim样例程序,每个样例模拟的环境如下: (1)CloudSimExample1.Java:创建一个一台主机 ...
- 样例20-汽车SHOW
观看样例点这里 素材下载 1.设置场景大小为400*3002.执行:文件->导入->导入到库,选择需要的汽车图片文件,将其导入到库面板中3.按照同样的方式,在库面板中导入所需的背景音乐文件 ...
随机推荐
- HTML基础（五）表单
表单的工作原理 简单来说就是客户在浏览器输入信息之后,浏览器将用户在表单中的数据进行打包发送给服务器,服务器接收到之后进行处理,如下图 语法 <form> 表单元素</form> ...
- 漫谈Word2vec之skip-gram模型
https://zhuanlan.zhihu.com/p/30302498 陈运文 复旦大学 计算机应用技术博士 40 人赞同了该文章 [作者] 刘书龙,现任达观数据技术部工程师,兴趣方向主要为自 ...
- AHOI2014/JSOI2014 奇怪的计算器
题目描述 题解: 考虑到经过一系列变化后小数不可能比大数大,我们可以用线段树维护区间修改. 重点是,每个节点都可以通过$a[i]=a[i]*t1+a0[i]*t2+t3$这个函数来表示,我们就可以把三 ...
- bzoj3336 Uva10572 Black and White
题目描述: 数据范围:2<=n,m<=8 题解: 很明显需要状压.但是怎么压不知道,压什么不知道. 然后从条件下手. 条件1要求黑色在一起白色在一起,记录轮廓线很容易做到. 条件2要求不能 ...
- 2. CHARACTER_SETS
2. CHARACTER_SETS CHARACTER_SETS表提供有关可用字符集的信息. 下表中的SHOW Name值对应于SHOW CHARACTER SET语句的列名. INFORMATION ...
- Android 图片设置圆角 方法之二
Android中经常会遇到对图片进行二次处理,例如加圆角,或者显示圆形图片.接下来我们再介绍一种方法. 首先, 自定义ImageView: android:id="@+id/iv" ...
- MySQL 初识
一.MySQL介绍: MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,M ...
- 关于Spring的理解和相关笔记
java不死的原因就是:就是因为他有一个核心非常强大的技术框架支持. Spring IOC: Inverse Of Control 控制反转 IFly fly; AOP: Aspect Oriente ...
- IDEA maven 无法加载已经安装的模块依赖包
今天打包一直报如下错误 Reactor Summary for freechain-op 1.0.1.OP: [INFO] [INFO] freechain-op .................. ...
- HDU 1426 dancing links解决数独问题
题目大意: 这是一个最简单的数独填充题目,题目保证只能产生一种数独,所以这里的初始9宫格较为稠密,可以直接dfs也没有问题 但最近练习dancing links,这类数据结构解决数独无疑效率会高很多 ...