小色帝
- 浏览: 67917 次
-
文章分类
最新评论
-
小色帝：
我是天才是打发
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 269Jquery事件 (一)、事件 ... -
开源轻量级移动端友好的JS地图库——leaflet学习教程
2017-01-05 18:57 1187开源轻量级移动端友好的JS地图库——leaflet学习教程 ... -
$("parent > child")、$("A B")、$("div#test")、$("div,#test")、$(".test","div")
2016-12-15 10:38 336这个标题似乎有些奇怪，但这些都是合法有效的jQuery选择器。 ... -
type=＂button＂ ,＂submit＂ 的区别（转）
2016-07-22 11:16 490type=＂button＂ ,＂submit＂ 的区别 ... -
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2016-07-21 14:10 416Jquery中$.get(),$.post(),$.a ... -
Ztree用法事例
2016-05-17 01:11 534【简介】 zTree 是利用 jQuery 的核心代码，实现一 ... -
jQuery 数据缓存data(name, value)详解及实现
2016-05-16 10:35 425本文要讨论的是最流行的JavaScript框架jQuery的数 ... -
jQuery数据缓存$.data 的使用以及源码解析
2016-05-16 00:49 433jQuery数据缓存$.data 的使用以及源码解析 实现原 ... -
jQuery.data()
2016-05-16 00:48 330jQuery.data() 所属分类：数据操作 | 工具类 E ... -
jQuery之AJAX
2016-05-16 00:16 404jQuery之AJAX 一、load() 加载页面数据 ... -
JQuery OrgChart
2016-05-15 12:36 569Query OrgChart 是一个jQuery插件能够让帮你 ... -
JS横向树（组织结构）
2016-05-15 11:19 2922最近看到不少人有类似的需求，实现组织架构的横向展开，显示，无聊 ... -
我也来说说怎么封装jQuery插件
2016-05-14 19:32 401http://www.w3cfuns.com/notes/17 ... -
jQuery插件原来如此简单 jQuery插件的机制及实战
2016-05-14 01:00 482jQuery插件原来如此简单 ... -
Echarts 仪表盘实例
2016-05-14 00:51 5281HTML 首先引入Echarts，然后在需要放置图表的地方加上 ... -
Jquery封装对象实例
2016-05-14 00:48 573jQuery自定义类封装 jQuery自定义类封装： ( ... -
Jquery 选择器总结
2015-04-15 19:21 518jQuery 的选择器可谓之强 ... -
关于SS框架后台代码开发规范实例
2013-02-01 17:20 1012工作半年了，接触的第一个项目就是SS为后台的框架的开发。 ... -
jquery 里面的.find() .each() .parent() .value(parseInt())
2013-02-01 09:33 20341.find() 方法获得当前元素集合中每个元素的后代，通过选 ...
相关推荐
标题提到的是“echarts各个省的地图json”，这意味着我们讨论的重点是ECharts如何利用JSON数据来绘制中国各省份的地图。 在ECharts中，地图图表是一种特殊类型的图表，它允许用户以地理形式展示数据。地图数据通常...
4. **data**：在 `series` 中，`data` 数组包含了地图上每个点的详细信息，如坐标（`lng` 和 `lat` 对应经纬度）和附加的注释信息（可通过 `name` 或其他自定义属性添加）。 5. **onEvents**：事件监听器，可以监听...
地图数据通常是以JSON格式存储，包含了各个区域的边界信息和对应ID，以便ECharts根据这些信息绘制地图。 2. **地图数据结构**： 包内的`echarts3地图数据(含全国和省js以及全国、省、地市json)`文件可能包含了不同...
整个实例代码通过简单的结构和清晰的注释，为读者提供了一个Vue项目中使用ECharts制作圆环图的完整参考，代码易于理解和借鉴。在实际开发中，开发者可以根据项目需求调整图表样式和数据，以适应不同的可视化需求。...
6. **文档和API**：虽然未提供具体文档，但通常源码中会包含一些注释和说明，结合ECharts的官方文档，可以了解ECharts-GL的API和功能。 通过学习和研究ECharts-GL的源码，开发者不仅可以提升3D图形编程能力，还可以...
然而，当饼图的各个扇区标签（也就是字段）的文本过长时，可能会导致文字重叠或者超出图表区域，影响图表的美观性和可读性。本篇文章将深入探讨如何解决Highcharts饼图字段超出的问题，让你的图表更加清晰易读。 ...
在这个函数中，使用了Echarts的配置对象`echarts_all_option`来设置图表的各个属性，如标题、提示框、图例、工具箱、数据轴（x轴和y轴）以及图表系列（例如柱状图和折线图）。 然后，使用AJAX请求从后端获取数据，...
虽然只有一个文件名"map"，但通常情况下，一个完整的MapJSON数据会包含多个文件，比如各个地级市的边界信息文件、颜色配置文件、以及可能的注释或说明文件等。在这个例子中，"map"可能是压缩包内的主数据文件，包含...
通过使用python的第三方库对数据库中的电影数据进行划分，提取各个属性有价值的部分，再利用html中的Flask，Echarts、WordCloud等技术，将其合理的展现在页面上，并添加”首页”,”电影”,”评分”,”词云”,”关于...
在杜邦图中，这些符号有助于展示各个指标间的相互作用和影响。 3. **数据绑定**：将实际数据与图表元素绑定是实现动态交互的基础。在JS杜邦图中，这通常通过JavaScript对象或数组实现，确保数据更新时，图表也随之...
4. **添加数据系列**：将数据绑定到图表对象上，定义各个系列的颜色、标签和其他属性。 5. **自定义样式**：调整图表的外观，如改变颜色、线条宽度、字体大小、背景色等，以满足视觉效果的需求。 6. **设置轴和...