Echarts中类似于仪表盘的镜头光晕是什么属性是什么?

温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!&&|&&
就算没有倾城的美貌,也要具有摧毁一切的骄傲!
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
&head&& & &meta charset="utf-8"&& & &title&ECharts&/title&&/head&&body&& & &!-- 为ECharts准备一个具备大小(宽高)的Dom --&& & &div id="main" style="height:400px"&&/div&& & &!-- ECharts单文件引入 --&& & &script src="../dist/echarts.js"&&/script&& & &script type="text/javascript"&// 添加一行代码//var timeT//配置echarts& & & & // 路径配置& & & & require.config({& & & & & & paths: {& & & & & & & & echarts: '../dist'& & & & & & }& & & & });& & & &&& & & & // 使用& & & & require(& & & & & & [& & & & & & & & 'echarts',& & & & & & & & 'echarts/chart/gauge'& & & & & & ],& & & & & & function (ec) {& & & & & & & & // 基于准备好的dom,初始化echarts图表& & & & & & & & var myChart = ec.init(document.getElementById('main'));&& & & & & & & &&& & & & & & & & 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',& & & & & & min:0,& & & & & & max:220,& & & & & & splitNumber:11,& & & & & & axisLine: { & & & & & &// 坐标轴线& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],& & & & & & & & & & width: 3,& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisLabel: { & & & & & &// 坐标轴小标记& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisTick: { & & & & & &// 坐标轴小标记& & & & & & & & length :15, & & & &// 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: 'auto',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & splitLine: { & & & & & // 分隔线& & & & & & & & length :25, & & & & // 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle(详见lineStyle)控制线条样式& & & & & & & & & & width:3,& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & pointer: { & & & & & // 分隔线& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5& & & & & & },& & & & & & title : {& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式,详见TEXTSTYLE& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & fontSize: 20,& & & & & & & & & & fontStyle: 'italic',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & detail : {& & & & & & & & backgroundColor: 'rgba(30,144,255,0.8)',& & & & & & & & borderWidth: 1,& & & & & & & & borderColor: '#fff',& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5,& & & & & & & & offsetCenter: [0, '50%'], & & & // x, y,单位px& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式,详见TEXTSTYLE& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff'& & & & & & & & }& & & & & & },& & & & & & data:[{value: 40, name: 'km/h'}]& & & & },& & & & {& & & & & & name:'转速',& & & & & & type:'gauge',& & & & & & center : ['25%', '55%'], & &// 默认全局居中& & & & & & radius : '50%',& & & & & & min:0,& & & & & & max:7,& & & & & & endAngle:45,& & & & & & splitNumber:7,& & & & & & axisLine: { & & & & & &// 坐标轴线& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],& & & & & & & & & & width: 2,& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisLabel: { & & & & & &// 坐标轴小标记& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisTick: { & & & & & &// 坐标轴小标记& & & & & & & & length :12, & & & &// 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: 'auto',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & splitLine: { & & & & & // 分隔线& & & & & & & & length :20, & & & & // 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle(详见lineStyle)控制线条样式& & & & & & & & & & width:3,& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & pointer: {& & & & & & & & width:5,& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5& & & & & & },& & & & & & title : {& & & & & & & & offsetCenter: [0, '-30%'], & & & // x, y,单位px& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式,详见TEXTSTYLE& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & fontStyle: 'italic',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & detail : {& & & & & & & & //backgroundColor: 'rgba(30,144,255,0.8)',& & & & & & & &// borderWidth: 1,& & & & & & & & borderColor: '#fff',& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5,& & & & & & & & width: 80,& & & & & & & & height:30,& & & & & & & & offsetCenter: [25, '20%'], & & & // x, y,单位px& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式,详见TEXTSTYLE& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff'& & & & & & & & }& & & & & & },& & & & & & data:[{value: 1.5, name: 'x1000 r/min'}]& & & & },& & & & {& & & & & & name:'油表',& & & & & & type:'gauge',& & & & & & center : ['75%', '50%'], & &// 默认全局居中& & & & & & radius : '50%',& & & & & & min:0,& & & & & & max:2,& & & & & & startAngle:135,& & & & & & endAngle:45,& & & & & & splitNumber:2,& & & & & & 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 '1' : return 'Gas';& & & & & & & & & & & & case '2' : return 'F';& & & & & & & & & & }& & & & & & & & }& & & & & & },& & & & & & splitLine: { & & & & & // 分隔线& & & & & & & & length :15, & & & & // 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle(详见lineStyle)控制线条样式& & & & & & & & & & width:3,& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & pointer: {& & & & & & & & width:2,& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5& & & & & & },& & & & & & title : {& & & & & & & & show: false& & & & & & },& & & & & & detail : {& & & & & & & & show: false& & & & & & },& & & & & & data:[{value: 0.5, name: 'gas'}]& & & & },& & & & {& & & & & & name:'水表',& & & & & & type:'gauge',& & & & & & center : ['75%', '50%'], & &// 默认全局居中& & & & & & radius : '50%',& & & & & & min:0,& & & & & & max:2,& & & & & & startAngle:315,& & & & & & endAngle:225,& & & & & & splitNumber:2,& & & & & & axisLine: { & & & & & &// 坐标轴线& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],& & & & & & & & & & width: 2,& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisTick: { & & & & & &// 坐标轴小标记& & & & & & & & show: false& & & & & & },& & & & & & axisLabel: {& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & },& & & & & & & & formatter:function(v){& & & & & & & & & & switch (v + '') {& & & & & & & & & & & & case '0' : return 'H';& & & & & & & & & & & & case '1' : return 'Water';& & & & & & & & & & & & case '2' : return 'C';& & & & & & & & & & }& & & & & & & & }& & & & & & },& & & & & & splitLine: { & & & & & // 分隔线& & & & & & & & length :15, & & & & // 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle(详见lineStyle)控制线条样式& & & & & & & & & & width:3,& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & pointer: {& & & & & & & & width:2,& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5& & & & & & },& & & & & & title : {& & & & & & & & show: false& & & & & & },& & & & & & detail : {& & & & & & & & show: false& & & & & & },& & & & & & data:[{value: 0.5, name: 'gas'}]& & & & }& & ]};clearInterval(timeTicket);timeTicket = setInterval(function (){& & option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;& & option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;& & option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;& & option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;& & myChart.setOption(option,true);},2000)& & & & & & & & & &&& & & & & & & & & &&& & & & & & & & // 为echarts对象加载数据&& & & & & & & & myChart.setOption(option);&& & & & & & }& & & & );& & &/script&&/body&写过之后存到记事本中,再在编译器Brackets.exe中运行,那么图形展示就形成了。注:路径一定要配对。
阅读(5707)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'Echarts中的gauge仪表盘.(特殊加一句代码)',
blogAbstract:'?&!DOCTYPE html&&head&& & &meta charset=\"utf-8\"&& & &title&ECharts&/title&&/head&&body&& & &!-- 为ECharts准备一个具备大小(宽高)的Dom --&& & &div id=\"main\" style=\"height:400px\"&&/div&& & &!-- ECharts单文件引入 --&& & &script src=\"../dist/echarts.js\"&&/script&& & &script type=\"text/javascript\"&// 添加一行代码//var timeT',
blogTag:'echarts,brackets.exe,gauge仪表盘,html',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:4,
publishTime:1,
permalink:'blog/static/',
commentCount:1,
mainCommentCount:1,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'就算没有倾城的美貌,也要具有摧毁一切的骄傲!',
hmcon:'-1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人:
{list a as x}
{if !!b&&b.length>0}
他们还推荐了:
{list b as y}
转载记录:
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}echarts配置更改图形大小标识等等
$(&.line&).echarts({
tooltip : {
trigger: 'item',
formatter:'数量
{a}漏洞 {b}:{c}个'//悬浮框显示
type: 'bar',
data: data,
//柱形图距离远近
barWidth:40,
barGap:&10%&,
labels: [&高危&,&中危&,&低危&],//图标曲线代表
type: &category&
type: &value,
axisLabel: {
formatter: &
grid:{//宽高
markLine: [[{//添加自定义线
tooltip : {
formatter:'漏洞数量
{b}:{c}'
name: '平均值',
value: avg_val,
yAxis: avg_val
xAxis: 100000,
yAxis: avg_val当前,整个互联网正在从IT时代向DT时代演进,大数据技术也正在助力企业和公众敲开DT世界大门。当今“大数据”一词的重点其实已经不仅在于数据规模的定义,它更代表着信息技术发展进入了一个新的时代,代表着爆炸性的数据信息给传统的计算技术和信息技术带来的技术挑战和困难
推荐:史上最全的“大数据”学习资源(上) 当前,整个互联网正在从IT时代向DT时代演进,大数据技术也正在助力企业和公众敲开DT世界大门。当今“大数据”一词的重点其实已经不仅在于数据规模的定义,它更代表着信息技术发展进入了一个新的时代,代表着爆炸性的数据信息给
iOS键盘弹出警告&Can'tfindkeyplane......&一点击UITextField,logo显示区就打印如下:Can'tfindkeyplanethatsup
关于编写军旗人和电脑玩儿的那种怎么推断军旗的位置。推断某个棋子是用于防守的函数,太难了。求大神指点参考:http://download.csdn.net/detail/generalhking/454
apacheFTPClient上传文件,文件内容乱码代码如下:InputStreamis=newByteArrayInputStream(xmlString.getBytes(&utf-8&));Ft
关于java.lang.string.format()方法的详解,网上百度只有英文的,看不懂;关于java.lang.string.format()方法的详解,网上百度只有英文的,看不懂;下个api,
SQL语句正确,但ResultSet返回空SQL语句正确,但在Java项目中运行,ResultSetrs的next()返回是false.如何解决?sqlBuf.append(&select*from(
Azure能将非.net的软件移植到WindowsAzure上吗Azure能将非.net的软件移植到WindowsAzure上吗当然可以,因为Azure支持虚拟机,甚至可以上传你的本地vhd镜像。所以
ExceptionstartingfilterstrutsFilterDispatcher严重:ExceptionstartingfilterstrutsFilterDispatcherjava.la
关于avayaIpOffice程控交换机的开发问题现在客户有一套avaya的IpOffice500的程控交换机,工控机已经安装好了,现在我在做的软件是类似呼叫中心的软件。C#开发需求是1.当外线有电话
C#调用自己打包的dll出现找不到指定的程序问题大家好,最近用C#调用Matlab,尝试过简单的函数调用没问题(比如sqrt函数),一涉及到下面这两个复杂的函数就出问题,想了好久也没解决,请各位高手指
【求助】Therequestedresource()isnotavailable。运行项目时,jsp页面跳转到servlet就会报**Therequestedresource(/Testsql/Lis
.netframework4hasnotbeeninstalledbecause:安装时发生严重错误,图片如下:[img=/question/368616
我的一个JSP页面有2个form我怎么设置才能按了一个submit按钮就能同时把2个表单的数据提交到一个action里面去啊###你为什么要在一个页面用两个Form呢!###说说具体怎么把两个表单传过
android方面做什么题目比较有研究价值,想搞一个关于android的软件设计大赛,题目没选好,希望大家给个意见。###组委会?###这种比赛,不是命题作文,而要比创意不要定题目了定时间就行###时
一、JDOM简介JDOM是一个开源项目,它基于树型结构,利用纯JAVA的技术对XML文档实现解析、生成、序列化以及多种操作。JDOM直接为JAVA编程服务。它利用更为强有力的JAVA语言的诸多特性(方
最近开发一个类似360的小工具,其中一个功能是扫描、清理垃圾,包含了扫描、清理IE缓存。使用RunDll32.exe清理IE缓存没有什么问题,问题是如何准确的扫描出IE缓存的大小?现在的情况是每次扫描
最近在MVC3下做网站多语言遇到问题,用户请求!我捕获语言language=fileter.HttpContext.Request.UserLanguages[0].ToStri
winform13个columnab都是数据绑定的,c是a*b的值(ab都是数值)2checkbox数据库内是个verchar,如果不是空的,就打勾,空的,就没有3要在前面有一行,显示行号,怎么做1题根据实际数据改变仪表盘颜色 - CSDN博客
根据实际数据改变仪表盘颜色
情景:实际值&计划值 仪表盘颜色显示 绿色表示超过预期 & 相反则表示未达到预期
js 控制&方法if (factVal &= planVal) {
_curOption.series[1].axisLine.lineStyle.color = [[0.0, 'lime'], [ _curOption.series[1].data[0].value/100, '#55CEA9'], [1, '#efefef']];
_curOption.series[1].axisLine.lineStyle.color = [[0.0, 'lime'], [ _curOption.series[1].data[0].value/100, '#FA8565'], [1, '#efefef']];
option = {
tooltip : {
formatter: &{a}: {c}%&
series : [
startAngle: 180,
endAngle: 0,
name:'计划完成',
type:'gauge',
center : ['50%', '60%'],
// 默认全局居中
radius : 220,
splitNumber:10,
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [[0.0, 'lime'],[0, '#FA8565'],[1, '#EFEFEF']],
width: 150
axisTick: {show:false},
axisLabel: {show:false},
splitLine: {show:false},
pointer: {
color:'#EB7D64',
length: 250
detail : {
show : false
data:[{value: 60}]
startAngle: 180,
endAngle: 0,
name:'实际完成',
type:'gauge',
center : ['50%', '60%'],
// 默认全局居中
radius : 220,
splitNumber:10,
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
width: 150
axisTick: {show:false},
axisLabel: {
// 坐标轴小标记
textStyle: {
// 属性lineStyle控制线条样式
fontWeight: 'bolder',
fontSize : 16,
color: '#444'
splitLine: {
length : 10,
// 属性length控制线长
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: '#444'
pointer: {
color:'#;,
length:220
detail : {
show : false
data:[{value: 40}]
具体方法就是显示两个仪表盘 &只给第二个仪表盘改变颜色
看不懂请自行领悟或者留言
本文已收录于以下专栏:
相关文章推荐
var cpu_r = 100;
option = {
tooltip : {
formatter: &{a} {b} : {c}%&
toolbox: {
feature...
做项目用到仪表盘,但是官方实例的仪表盘如下:
但是想让 红色在0-20 ,80-100是绿色option = {
tooltip : {
formatter: &{a} {b...
Echarts关于仪表盘
先来无事,特制作不一样的图标一发,把仪表盘做成百分条,我也是醉了
var myChart = echarts.init(doc...
本博客实例是基于echarts3的
name:'实际',
type:'bar',
上一篇文章做了一个echarts的首秀,接下来的好多篇就开始讲解echarts的option配置项今天讲option中的title(这些都是我看过官网配置项,根据自己的理解写出来的,但不一定全,但是我...
title是echarts中的标题
left’ | ‘right’ | ‘center
他的最新文章
讲师:宋宝华
讲师:何宇健
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)附录:ECharts图属性介绍-统计图
附录:ECharts图属性介绍
divId是统计图标识,每一种配色方案的统计图应该有不同的标识。注:如果两个统计图用同一个divId,预览时只会有一个统计图。
主题是控制统计通风格的属性。目前提供了14种风格可供用户选择。
显示图例用来控制图例的显示。
自定义轴线和轴文字
勾选上使用自定义轴线颜色,即可设置横轴和纵轴的线颜色,用户可以自定义横轴、纵轴线颜色;轴线宽度用来设置横轴和纵轴的线宽度,当线宽度小于等于0时,视为没有。
轴文字大小用来设置横轴和纵轴文字的大小,分为初号到六号,总共13种供用户使用;轴文字字体用来设置横轴和纵轴的文字字体,有多种字体形式供用户选择。
显示标签用来控制是否显示各分类的数据。
显示工具栏
显示工具栏属性可以控制是否显示工具栏。
工具条包括以下按钮:
辅助线开关:可在统计图中添加辅助线,通过添加辅助线,便于比较其余系列于标志值的差距。
删除辅助线按钮,可依次删除添加的辅助线。
清空辅助线按钮,清空所有辅助线。
数据视图按钮,可以查看统计图对应的数据,并可修改数据,刷新后统计图重新计算。
折线图切换按钮,可将柱图切换为折线图。
柱形图切换按钮,可将折线图切换为柱图。
还原按钮,将统计图恢复到最开始效果。
保存图片按钮,可生成统计图图片。
是否显示提示框
是否显示提示框属性控制鼠标移动到柱子上是否会弹出数据信息的提示框。
提示框触发方式
提示框触发方式用来设置提示框方式,item是以一项一项的方式指出:
axis是以轴心线的方式指出:
勾选使用超链接就可以为统计图添加超链接,超链接打开方式有在新窗口打开和自身窗口打开两种方式。
超链接url有两种表达方式:1)直接写URL,例如上面图上的;2)润乾表达式:=&a.jsp?a=&+A1,例如:&/mis2/vrsr/showReport1.jsp?resID=12744&& 其中res参数的值需要写为被链接资源的id。
显示最大最小值
显示最大值最小值控制在统计图是否标志出每个系列的最大值和最小值,这样会使用户一目了然。
是否显示缩放条
是否显示缩放条用来控制缩放条是否显示,通过滑动缩放条可控制系列数据的显示。
是否实时显示缩放
是否实时显现缩放,滑动缩放条时,对应的图是否实时变化。
缩放起始值百分比
缩放起始值百分比用来表示缩放条的开始位置。
缩放结束值百分比
缩放其实值百分比和缩放结束值百分比分别用来表示缩放条的起始位置和结束位置。
加载动画效果
加载动画效果是当预览统计图的时候,如果数据加载的缓慢,就会显示动态效果。已经有6种动画效果供用户使用。
参数默认值
参数默认值用于实时取数功能使用,数据源中使用的参数默认值。
从属性设置中设置取数,在输入框中直接输入数据。数据格式为:
[[null,&衬衫&,&羊毛衫&,&雪纺衫&,&裤子&,&高跟鞋&,&袜子&],[&产量&,90,60,70,90,80,90],[&销量&,28,40,60,33,30,40],[&订购量&,43,62, 50, 67, 28,55],[&库存量&,64,39, 59, 58, 70,88]]
sql系列名用于实时取数功能使用,使用sql取数时系列名定义。sql系列名格式:&单价,数量&。
数据源用于实时取数功能使用。数据源格式:
{&settings&:{&SQL&:&&,&dataFormat&:&array&,&details&:{&A5&:{&row&:-1,&type&:&sql&,&col&:3,&sql&:&select category,testNum,testVal from test_category&}}},&type&:&DATABASE&,&interval&:0}
sql语句含义:第一字段是分类名,第二个字段是系列值一,第三个字段是系列值二,依次类推
注:使用数据源取数时,一定要设置“sql系列名”。
取数设置,数据,数据源取数的优先级从高到低依次排列是:数据源,数据,取数设置。
多层环形图
标题用来显示多层环形图的标题。
标题文字大小
标题文字大小用来设置多层环形图的标题文字的大小。
环形宽度用来设置多层环形图的环形宽度。
图例间距用来设置多层环形图的图例的间距。
堆积条形图
提示框触发类型
提示框触发类型分为显示多系列和显示单系列,显示多系列提示框显示所有系列,显示单系列提示框只显示单系列。
坐标轴指示器类型
轴心线触发方式在当提示框触发方式是”axis“类型的时候起作用,属性值为“shadow”和“”,
shadow形式为:
显示标签用来控制标签的有无,标签位置控制了标签所在的位置,这有九种属性供用户选择。
工具栏启用数据视图
当勾选上工具栏启用数据视图时,就有数据视图,点击切换到数据显示。
数据视图只读
当勾选数据视图只读的时候,点击数据视图数据只读:
当去掉勾选数据视图只读时:
工具栏启用动态类型切换
当勾选上工具栏启用动态类型切换的时候,就可以设置动态类型。第一个是折线图切换,第二个是柱图切换,第三个是堆积图切换,第四个是平铺切换。&
启用拖拽重计算特性
可计算型用来拖拽每个分类的多个系列值,使得各系列值可以分离或叠加。
柱宽用来设置堆积条形图柱子的宽度。当属性值小于0或是不填的时候,为自适应;当数值大于自适应值时,也是自动变成自适应大小,只有数值在0-自适应之间此属性才可以生效。
多维条形图
勾选显示标签即是显示条形图的数值,标签位置控制了标签所在的位置,这有九种属性供用户选择。标签数据显示格式代表数据的显示格式,分为百分比和数值两种形式。
显示横轴坐标轴线是来控制横轴坐标轴线的有无,显示坐标轴文本标签是来控制坐标轴文本标签的有无,显示纵轴坐标轴线是来控制纵轴坐标轴线的有无。
系列名代表所使用的系列的名字
分割段数表示把整个仪表盘分成的段数,即显示的刻度。
坐标轴线颜色表示坐标轴线的颜色,坐标轴线宽度表示坐标轴的宽度,坐标轴小标记分割段数表示坐标轴的分割段数,坐标轴小标记长度表示坐标轴的小标记长度,坐标轴小标记颜色表示坐标轴小标记的颜色,坐标轴文本标签颜色表示坐标轴文本标签的颜色。
通过勾选显示分割线控制分割线的有无,分割线用来隔开每一段,充分体现了分割段数。分隔线长度用来设置分割线的长度,分割线颜色用来设置分割线的颜色。
指针宽度代表仪表盘中指针的宽度。
通过勾选显示系列名控制系列名的显示。系列名偏移中心表示系列名距离中心的偏移位置,系列名字体重量表示字体的粗细,分为:normal,bold,bolder,lighter,100,200,...900等。
数据表示指针所转动的弧度,数据颜色用来设置数据的颜色,数据字体重量表示数据字体的粗细,分为normal,bold,bolder,lighter,100,200,...900等,数据名表示数据的名字。
中心点位置
中心点位置代表仪表盘的圆心位置,50%代表中心点在水平方向的位置,90%代表中心点在垂直方向的位置。
半径代表仪表盘的半径。
起始角度代表仪表盘的起始角度,即与水平方向的夹角。
结束角度代表仪表盘的结束角度,即与水平方向的夹角。
指针长度代表仪表盘中指针的长度,即指针在垂直方向上占仪表盘的高度的百分比,指针宽度代表指针的宽度,指针颜色用来设置指针的颜色。
数据背景颜色可以设置数据的背景颜色,数据边框宽度可以设置数据的边框宽度,数据边框颜色可以设置数据的边框颜色,数据宽度可以设置数据的宽度,数据高度可以设置数据的高度,数据偏移中心可以设置数据相对中心的偏移位置,数据文字字号可以设置数据文字的粗细,数据名为数据的名称。
目前K线图不仅支持数据和数据源取数,还支持取数方式取数。无论是哪种取数方式,都需要四个整数字段。
数据格式:[[null,&2000年&,&2001年&,&2002年&,&2003年&,&2004年&,&2005年&,&2006年&,&2007年&,&2008年&,&2009年&,&2010年&,&2011年&,&2012年&,&2013年&,&2014年&,&2015年&,&2016年&],[&开盘&,10,15,12,35,26,23,16,19,24,25,26,12,11,16,18,14],[&收盘&,16,15,13,24,25,15,36,17,12,13,23,15,26,21,18,24],[&最低&,13,24,16,27,16,28,12,25,24,13,15,16,31,16,19,27],[&最高&,12,15,21,25,16,27,12,16,18,26,19,20,13,17,19,26]]
数据源格式:{&settings&:{&SQL&:&&,&dataFormat&:&array&,&details&:{&A5&:{&row&:-1,&type&:&sql&,&col&:5,&sql&:&select&产品名称,供应商ID,再订购量,订购量,库存量&&from&demo_product&}}},&type&:&DATABASE&,&interval&:0}
实时指针图
实时指针图因为有分类名,所以和其他统计图取数时方法不太一样,这里单独介绍。
数据取数:
数据源取数:{&settings&:{&SQL&:&&,&dataFormat&:&array&,&details&:{&A5&:{&row&:-1,&type&:&sql&,&col&:3,&sql&:&select '分配内存',min(cast(valuestr1 as& numeric(10,2)))-50.1& from t_gez_sysMonitorData where monitortag1='calcReportTime'&}}},&type&:&DATABASE&,&interval&:6000}
实时曲线图需要从数据库取数,这样数据库里的数据变了,曲线也会跟着变化,因此曲线图只支持数据源取数。
数据源取数:{&settings&:{&SQL&:&&,&dataFormat&:&array&,&details&:{&A5&:{&row&:-1,&type&:&sql&,&col&:1,&sql&:&select 运货费 from demo_orders where 订单ID='11064'&}}},&type&:&RABDOM&,&interval&:800}
标题横向位置属性分为左侧、中间、右侧,用来显示标题水平方向的位置。
标题纵向位置属性分为上方、中间、下方,用来显示标题垂直方向的位置。
是否显示图例通过勾选来显示图例,图例排列方式分为横向和纵向,
图例横向位置分为左侧、中间、右侧,用来显示图例水平方向的位置。
图例纵向位置分为上方、中间、下方,用来显示图例垂直方向的位置。
是否显示每条数据名称
是否显示每条数据名称通过勾选来显示数据名称。
是否显示每条数据名称和图的连线
用来控制显示每条数据名称和图的连线的有无。
鼠标移上是否显示图的数据名称
用来控制鼠标上移时图的数据名称的有无。
鼠标经过时状态
鼠标经过时数据名称显示位置有:center、left、right三种。鼠标经过时数据名称字体大小显示数据名称的字体大小,鼠标经过时数据名称字体样式显示数据名称的字体样式。
通过勾选显示图例来控制图例的选择。
图例水平位置用left和right控制图例的水平位置,图例垂直位置用bottom和top控制图例的垂直位置。
默认地图为area。
区域文字颜色
区域文字颜色用来设置某个区域的文字颜色。
例如:设置成了红色,默认为黑色。
区域边框宽度
区域边框宽度用来设置某个区域的边框宽度。
例如:设置边框宽度为3,默认为0。
区域边框颜色
区域边框颜色用来设置某个区域的边框颜色。
提示框背景色用来设置提示框的背景颜色,提示框背边框宽度用来设置提示框边框的宽度,提示框边框颜色用来设置提示框的边框颜色,提示框文字颜色用来设置提示框的文字颜色。
勾选是否显示返回图标控制返回上一级图标的有无。
返回图标大小用来设置返回上一级图标的大小。
自定义配色
通过勾选使用自定义配色来控制是否使用自定义配色,自定义配色方案供用户自己配置各个区域的颜色。
{&东北地区&:&8defff&,&东部地区&:&32cd32&,&西部地区&:&f6ff00&,&中部地区&:&fc718b&}
通过勾选是否显示颜色条来控制颜色条的有无,通过勾选颜色条使用标签方式来设置颜色条是否使用标签方式。
颜色条水平位置用left和right设置颜色条的水平位置,颜色条垂直位置用bottom和top设置颜色条的垂直位置。
数据范围最小值是数据条的最小限度,数据范围最大值是数据条的最大限度。
每个区域图的颜色根据数据范围而定,如果某个区域数据超出了或是没在数据范围之内,展现时该区域会以灰色显示。
通过勾选显示缩放工具来控制是否显示缩放工具,缩放工具宽度是设置的缩放宽度,缩放工具高度是设置的缩放高度。
通过勾选超链接设置是否插入超链接,新窗口打开超链接的勾选是选择当前窗口打开超链接还是新窗口打开超链接,超链接URL用来设置要链接的地址。详细请参考配置。
选择区域执行js方法
点击区域时执行的js方法名,默认传参数为所选地区名。
通过勾选标记点控制标记点的有无,标记点坐标文件用来给标记点提供数据,这里写文件名称,文件路径为:mis2\Charts\customGraph\ECharts\geoJson\china-main-city。
文件格式:
{&西部地区&:[91.11,39.97],&东北地区&:[126.63,45.75],&中部地区&:[106.54,29.59],&东部地区&:[120.06,29.32],&西区&:[91.11,39.97],&北区&:[126.63,45.75],&中区&:[106.54,29.59],&东区&:[120.06,29.32]
标记点数据最小值设置标记点的数据最小值,标记点数据最大值设置标记点的数据最大值。标记点数据的大小决定标记点存在哪个范围,不同的范围标记点的颜色不同。
参数默认值
属性中使用的参数默认值。
百度地图扩展
取数方法:[[null,&上海&,&广州&,&大连&,&包头&,&昆明&,&郑州&,&南宁&,&常州&,&重庆&,&拉萨&,&长春&],[&北京&,90,10,30,50,70,20,80,40,58,90,11]]
取数方法:
[[null,&弱&,&中&,&强&],[&值&,&海门&,&鄂尔多斯&,null],[&值&,&招远&,&舟山&,&&],[null,&齐齐哈尔&,&盐城&,&&],[null,&赤峰&,&青岛&,&乳山&],[null,&上海&,&北京&,&石家庄&],[null,&成都&,&西安&,&重庆&],[null,&常州&,&厦门&,&长春&],[null,&天津&,&南京&,&绍兴&],[null,&海口&,&广州&,&深圳&]]
地图扩展-室内装修分析
geoCoord定位地址
定位地址:
{&安晨&:[210,44],&立新&:[144,59],&erik&:[222,44],&佳璐&:[488,23],&绍波&:[231,59],&功&:[210,60],&雷哥&:[240,44],&林峰&:[195,60],&诗才&:[195,71],&大佛&:[165,29],&孟珂&:[522,43],&毅楠&:[222,59],&爽哥&:[240,60],&红启&:[570,54],&令君&:[165,60],&csfe&:[500,54],&淼童&:[473,60],&叮叮&:[39,45],&天下乐&:[289,50],&坤哥&:[176,59],&大发&:[500,40],&武琦&:[231,71],&严萍&:[231,46],&清平乐&:[649,203],&洗手间1&:[440,179],&浪宇&:[150,55],&五福降中天&:[373,173],&得胜令&:[253,179],&望江南&:[72,203],&刚哥&:[176,71],&小兑儿&:[71,45],&洗手间3&:[637,179],&浣溪沙&:[637,203],&饥渴难耐的辉辉&:[473,40],&亚江&:[500,60],&兵兵&:[488,60],&高经&:[545,54],&胡瑶&:[195,29],&过江龙&:[289,32],&西湖春&:[496,179],&四和春&:[663,203],&开放&:[488,43],&杏花天&:[676,203],&晓青&:[210,71],&辉耀&:[522,60],&庆千秋&:[86,203],&洗手间2&:[637,53],&朝霞&:[222,71],&莉姐&:[530,70],&黄競&:[210,59],&祖明&:[195,44],&万年欢&:[687,24],&周玉&:[165,44],&邱华&:[468,23],&新乐&:[522,23]}
[[null,&嘿嘿&,&高经&,&会议室&,&&,&&,&&],[&点数据&,&叮叮,小兑儿,胡瑶,高经,erik,祖明,林峰,坤哥,刚哥,爽哥,雷哥,邱华,淼童,亚江,莉姐,大发,饥渴难耐的辉辉,红启,安晨,功,立新,诗才,黄競,晓青,毅楠,周玉,令君,佳璐&,&&,&叮叮,小兑儿,胡瑶,淼童&,&高经&,&五福降中天&],[&线数据&,&erik-胡瑶,祖明-叮叮,祖明-小兑儿&,&高经-洗手间1,高经-洗手间2,高经-洗手间3&,&淼童-五福降中天,大发-西湖春,林峰-望江南,莉姐-杏花天,雷哥-过江龙,毅楠-天下乐,红启-万年欢,亚江-浣溪沙,爽哥-得胜令,饥渴难耐的辉辉-万年欢&]]
更多文章:

我要回帖

更多关于 镜头光晕是什么 的文章

 

随机推荐