- 浏览: 64965 次
文章分类
最新评论
-
小色帝:
我是天才是打发
Jquery实现的Tabs页 -
小色帝:
小色帝 写道1111而温热
Jquery实现的Tabs页 -
小色帝:
1111而温热
Jquery实现的Tabs页
HTML
首先引入Echarts,然后在需要放置图表的地方加上div#myChart,同时给它加上宽度和高度属性。
<script src="echarts.min.js"></script>
<div id="myChart" style="width: 600px;height:400px;"></div>
Javascript
接下来要初始化echarts实例,然后设置选项,最后渲染图像。
var myChart = echarts.init(document.getElementById('myChart'));
option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
series : [
{
name:'业务指标',
type:'gauge',
detail : {formatter:'{value}%'}, //仪表盘显示数据
axisLine: { //仪表盘轴线样式
lineStyle: {
width: 20
}
},
splitLine: { //分割线样式
length: 20
},
data:[{value: 50, name: '完成率'}]
}
]
};
myChart.setOption(option);
选项设置中的tooltip是一个提示框组件,默认参数show:true是显示提示框的。参数formatter是提示框浮层内容格式,它支持字符串模板和回调函数两种形式。一般我们使用字符串模板,模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 'axis' 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。对饼图、仪表盘、漏斗图三种类型的图表参数含义为: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)。
选项中的series是系列列表。每个系列通过 type 决定自己的图表类型,它包含很多参数。其中参数name表示系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。参数type指图表类型,type:'gauge'即仪表盘。参数detail是指仪表盘详情,用于显示数据,可以定义数据显示的高宽大小,背景色,边框颜色等等,本例中定义了仪表盘的详情显示为百分数。参数axisLine可以定义仪表盘轴线相关配置,如轴线样式等。参数splitLine用来定义仪表盘中的分隔线样式,如线长、线的颜色、线宽等等。参数data则是用来展示数据的,可以设置仪表盘指标对应的值以及名称。
如果是一个动态变化的仪表盘,可以使用setInterval()定时变换仪表值,如以下代码。
?
1
2
3
4
5
clearInterval(timeTicket);
var timeTicket = setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
},2000);
以上内容给大家介绍了ECharts仪表盘实例代码,希望对大家有所帮助!
首先引入Echarts,然后在需要放置图表的地方加上div#myChart,同时给它加上宽度和高度属性。
<script src="echarts.min.js"></script>
<div id="myChart" style="width: 600px;height:400px;"></div>
Javascript
接下来要初始化echarts实例,然后设置选项,最后渲染图像。
var myChart = echarts.init(document.getElementById('myChart'));
option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
series : [
{
name:'业务指标',
type:'gauge',
detail : {formatter:'{value}%'}, //仪表盘显示数据
axisLine: { //仪表盘轴线样式
lineStyle: {
width: 20
}
},
splitLine: { //分割线样式
length: 20
},
data:[{value: 50, name: '完成率'}]
}
]
};
myChart.setOption(option);
选项设置中的tooltip是一个提示框组件,默认参数show:true是显示提示框的。参数formatter是提示框浮层内容格式,它支持字符串模板和回调函数两种形式。一般我们使用字符串模板,模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 'axis' 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。对饼图、仪表盘、漏斗图三种类型的图表参数含义为: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)。
选项中的series是系列列表。每个系列通过 type 决定自己的图表类型,它包含很多参数。其中参数name表示系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。参数type指图表类型,type:'gauge'即仪表盘。参数detail是指仪表盘详情,用于显示数据,可以定义数据显示的高宽大小,背景色,边框颜色等等,本例中定义了仪表盘的详情显示为百分数。参数axisLine可以定义仪表盘轴线相关配置,如轴线样式等。参数splitLine用来定义仪表盘中的分隔线样式,如线长、线的颜色、线宽等等。参数data则是用来展示数据的,可以设置仪表盘指标对应的值以及名称。
如果是一个动态变化的仪表盘,可以使用setInterval()定时变换仪表值,如以下代码。
?
1
2
3
4
5
clearInterval(timeTicket);
var timeTicket = setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
},2000);
以上内容给大家介绍了ECharts仪表盘实例代码,希望对大家有所帮助!
发表评论
-
项目里 Jquery 日期空间,vilidation,highchars控件
2017-03-06 11:24 0项目中用到了一个Jquery 日期控件,挺好用的,特意总结下 ... -
jquery常用事件(整理)
2017-02-13 17:47 232Jquery事件 (一)、事件 ... -
开源轻量级移动端友好的JS地图库——leaflet学习教程
2017-01-05 18:57 1158开源轻量级移动端友好的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 449type="button" ,"submit" 的区别 ... -
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2016-07-21 14:10 390Jquery中$.get(),$.post(),$.a ... -
Ztree用法事例
2016-05-17 01:11 497【简介】 zTree 是利用 jQuery 的核心代码,实现一 ... -
jQuery 数据缓存data(name, value)详解及实现
2016-05-16 10:35 396本文要讨论的是最流行的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 ... -
echarts 各个属性意义注释
2016-05-14 18:27 1031<!DOCTYPE html PUBLIC " ... -
jQuery插件原来如此简单 jQuery插件的机制及实战
2016-05-14 01:00 451jQuery插件原来如此简单 ... -
Jquery封装对象实例
2016-05-14 00:48 533jQuery自定义类封装 jQuery自定义类封装: ( ... -
Jquery 选择器总结
2015-04-15 19:21 476jQuery 的选择器可谓之强 ... -
关于SS框架后台代码开发规范实例
2013-02-01 17:20 959工作半年了,接触的第一个项目就是SS为后台的框架的开发。 ... -
jquery 里面的.find() .each() .parent() .value(parseInt())
2013-02-01 09:33 19871.find() 方法获得当前元素集合中每个元素的后代,通过选 ...
相关推荐
大家在汽车驾驶舱里一眼就可以看到仪表盘,使用使用Echarts制作的仪表盘可以轻松展示用户的数据,清晰的看出某个指标值所在的范围,仪表盘形式的报表应用在各种统计系统中,本文结合实例讲解仪表盘在销售任务完成率...
使用Echarts仪表盘加极坐标实现一个炫酷的仪表盘,表盘渐变,边缘圆角,(备份的案例) 源码:https://gitee.com/DieHunter/myCode/tree/master/Echart/PolarGauge
echarts实例,其中包含经典的地图实例可以下钻,也包含了仪表盘实例
基于准备好的dom,初始化echarts仪表盘实例。 第二步: 我是通过父子组件传值把数据接收过来,在data中定义upPressure参数,并将接收来的devicePressure参数赋值给它,便于后面将值传入到echarts中 父组件中 ...
您可能感兴趣的文章:js canvas仿支付宝芝麻信用分仪表盘ECharts仪表盘实例代码(附源码下载)jquery插件canvaspercent.js实现百分比圆饼效果Javascript highcharts 饼图显示数量和百分比实例代码JavaS
18个Echarts数据可视化图表案例,每个案例都有代码注释,简单易懂。 还有三套echarts可视化大屏模板,案例下载后在编辑器内打开html,可以根据需求修改样式和数据,学习echarts绘图,也可以制作新的数据可视化大屏。
通过实例演示和理论分析,论文详细介绍了SpringBoot的核心概念和使用方法,旨在帮助读者全面理解和掌握SpringBoot的开发技术。 适用人群:本学位毕业论文适合本科专科毕业生,尤其是计算机科学、软件工程等相关专业...
echarts.js销售收入图表实例是一款常用的销售统计图表实例代码。
仪表盘.html 仿淘宝轮播(无缝做不出来) 仿苹果导航菜单 切换(给未来元素添加事件) 列表项滚动(多用于新闻条目) 加入购物车 动感十足的jquery导航 图片墙 字符串操作 字符云 工作簿名称.xls 延时菜单 推拉门改进 搜狐...