小色帝
- 浏览: 65042 次
-
文章分类
最新评论
-
小色帝：
我是天才是打发
Jquery实现的Tabs页 -
小色帝：
小色帝 写道1111而温热
Jquery实现的Tabs页 -
小色帝：
1111而温热
Jquery实现的Tabs页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery 测试11</title>
<meta name="keywords" content="" />
<meta name="discription" content="" />
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script src="echarts.min.js"></script>
<script type="text/javascript">
$(function(){
var myChart = echarts.init(document.getElementById('myChart'));
option = {
backgroundColor: '#1b1b1b',
tooltip : {
formatter: "{a} <br/>{c} {b}"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'油表',
type:'gauge',
center : ['50%', '50%'], // 默认全局居中
radius : '100%',
min:0, //刻度的起始值
max:100, // 刻度的最大值
startAngle:180,//起始角度
endAngle:0, //终止角度
splitNumber:10,//大盘平均分成多少份
detail : {formatter:'{value}%'}, //仪表盘显示数据
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
width: 2,
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
length :12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisLabel: {
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
},
formatter:function(v){//大盘刻度值显示的设置
switch (v + '') {
case '0' : return 'E';
case '50' : return 'Gas';
case '100' : return 'F';
}
}
},
splitLine: { // 分隔线
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:3,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer: {
width:2,
shadowColor : '#fff', //默认透明
shadowBlur: 10
},
title : {
show: false
},
detail : {
show: false
},
data:[{value: 0.1, name: 'gas'}]
}
]
};
myChart.setOption(option,true);
})
</script>
</head>
<body>
<div id="myChart" style="width: 600px;height:400px;border:1px solid blue"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery 测试11</title>
<meta name="keywords" content="" />
<meta name="discription" content="" />
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script src="echarts.min.js"></script>
<script type="text/javascript">
$(function(){
var myChart = echarts.init(document.getElementById('myChart'));
option = {
backgroundColor: '#1b1b1b',
tooltip : {
formatter: "{a} <br/>{c} {b}"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'油表',
type:'gauge',
center : ['50%', '50%'], // 默认全局居中
radius : '100%',
min:0, //刻度的起始值
max:100, // 刻度的最大值
startAngle:180,//起始角度
endAngle:0, //终止角度
splitNumber:10,//大盘平均分成多少份
detail : {formatter:'{value}%'}, //仪表盘显示数据
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
width: 2,
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
length :12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisLabel: {
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
},
formatter:function(v){//大盘刻度值显示的设置
switch (v + '') {
case '0' : return 'E';
case '50' : return 'Gas';
case '100' : return 'F';
}
}
},
splitLine: { // 分隔线
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:3,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer: {
width:2,
shadowColor : '#fff', //默认透明
shadowBlur: 10
},
title : {
show: false
},
detail : {
show: false
},
data:[{value: 0.1, name: 'gas'}]
}
]
};
myChart.setOption(option,true);
})
</script>
</head>
<body>
<div id="myChart" style="width: 600px;height:400px;border:1px solid blue"></div>
</body>
</html>
分享到：
发表评论
-
项目里 Jquery 日期空间,vilidation,highchars控件
2017-03-06 11:24 0项目中用到了一个Jquery 日期控件，挺好用的，特意总结下 ... -
jquery常用事件（整理）
2017-02-13 17:47 234Jquery事件 (一)、事件 ... -
开源轻量级移动端友好的JS地图库——leaflet学习教程
2017-01-05 18:57 1160开源轻量级移动端友好的JS地图库——leaflet学习教程 ... -
$("parent > child")、$("A B")、$("div#test")、$("div,#test")、$(".test","div")
2016-12-15 10:38 299这个标题似乎有些奇怪，但这些都是合法有效的jQuery选择器。 ... -
type=＂button＂ ,＂submit＂ 的区别（转）
2016-07-22 11:16 450type=＂button＂ ,＂submit＂ 的区别 ... -
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2016-07-21 14:10 390Jquery中$.get(),$.post(),$.a ... -
Ztree用法事例
2016-05-17 01:11 499【简介】 zTree 是利用 jQuery 的核心代码，实现一 ... -
jQuery 数据缓存data(name, value)详解及实现
2016-05-16 10:35 397本文要讨论的是最流行的JavaScript框架jQuery的数 ... -
jQuery数据缓存$.data 的使用以及源码解析
2016-05-16 00:49 392jQuery数据缓存$.data 的使用以及源码解析 实现原 ... -
jQuery.data()
2016-05-16 00:48 299jQuery.data() 所属分类：数据操作 | 工具类 E ... -
jQuery之AJAX
2016-05-16 00:16 378jQuery之AJAX 一、load() 加载页面数据 ... -
JQuery OrgChart
2016-05-15 12:36 540Query OrgChart 是一个jQuery插件能够让帮你 ... -
JS横向树（组织结构）
2016-05-15 11:19 2898最近看到不少人有类似的需求，实现组织架构的横向展开，显示，无聊 ... -
我也来说说怎么封装jQuery插件
2016-05-14 19:32 367http://www.w3cfuns.com/notes/17 ... -
jQuery插件原来如此简单 jQuery插件的机制及实战
2016-05-14 01:00 453jQuery插件原来如此简单 ... -
Echarts 仪表盘实例
2016-05-14 00:51 5228HTML 首先引入Echarts，然后在需要放置图表的地方加上 ... -
Jquery封装对象实例
2016-05-14 00:48 535jQuery自定义类封装 jQuery自定义类封装： ( ... -
Jquery 选择器总结
2015-04-15 19:21 481jQuery 的选择器可谓之强 ... -
关于SS框架后台代码开发规范实例
2013-02-01 17:20 961工作半年了，接触的第一个项目就是SS为后台的框架的开发。 ... -
jquery 里面的.find() .each() .parent() .value(parseInt())
2013-02-01 09:33 19871.find() 方法获得当前元素集合中每个元素的后代，通过选 ...
相关推荐
mybatisGenerator 支持生成类注释，属性注释，dao层注释
android全部UI属性及注释说明总结 android全部Action大全总结
学习过Access的读者可能知道，access设计视图有一个很不错的功能-----设计列的注释，这可以让设计者清楚地看到每个列的意义。一般的SQL Server建表时没有这个功能，但是他有扩展属性，这个功能也不错，可以把注释写...
从Sql server 2008获取表字段属性信息，注释信息 。注意，字段说明除非有备注才显示，如果没有的的情况下显示空白是正常的。
常用的CSS标签标记属性翻译注释 这里收藏一些编写网页的常用属性 便于以后编写网页查询 1、字体属性(type) font-family(使用什么字体) font-style(字体的样式，是否斜体)：normal/italic/oblique font-variant(字体...
有关于java的注释规范的详细描述，单行注释、多行注释、分块注释等这些java的三种注释方式
html注释HTML属性标签大全注释
18个Echarts数据可视化图表案例，每个案例都有代码注释，简单易懂。 还有三套echarts可视化大屏模板，案例下载后在编辑器内打开html，可以根据需求修改样式和数据，学习echarts绘图，也可以制作新的数据可视化大屏。
Eclipse版本Version: Oxygen.3a Release (4.7.3a),修改了GetterSetterUtil.class之后的jar包，能自动添加getter和setter方法注释
该标签为img的代码中已可以看出已含有了四个属性,包括src id lang alt,加上本身的img标签有5个属性. 那么该img标签在正常的情况下倒底还含有多个属性?(包含对象),我现在为大家一一列出来(以上面那句代码为例,并附上...
highcharts饼图字段过长超出解决，代码明了，操作简单
Xcode8下的插入文档注释插件,支持在全文范围内给每一个方法和属性添加文档注释.zip,xcode8的xcode源编辑器扩展。
Eclipse的快捷键以及各个注释的快捷键
实现echart的3d地球 以及相应的配置项设置 有大量图片以及相应的配置文件 拿到后看注释改一下配置项就行了 只要看完大部分的3d地球都可以实现
sourceinsight 多行 批量 注释 反注释 解压里面有readme.txt
基于echarts3.0以及百度地图的个人轨迹实现，实现了点随线顺序移动，代码里有详细的注释，可控制执行时间、执行顺序、延迟执行等，移动图标自定义配置等
DirectX vc++ 有注释 属性解析 脚本
eclipse中setter/getter方法自动添加属性注释,详情参考http://blog.csdn.net/yuxinabc/article/details/49179113
echarts前端实现后台请求加载多组动态曲线实例，时间做X轴，曲线组数可动态加载，曲线数据可动态加载。 附具体注释
通过java的反射技术获取，某个包路径下的类，并以表格形式打印类的属性注解及属性名称等，打印的结果以|分隔，复制到excel表格后，可以设置分列成需要的excel表格