require.config({
paths:{
echarts:"js/chart"
}
});
require([
'echarts',
'echarts/chart/gauge'
],function(ec){
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}分"
},
toolbox: {//工具栏 如刷新、保存为图片等
show : false,
/*feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}*/
},
series : [
{
name:'',//仪表盘名字
type:'gauge',//类型是仪表盘
radius: 70,
data:[{value:85, name: '得分'}],//仪表盘的值为85,鼠标经过时显示的框名字为“得分”
center : ['50%', '78'],//仪表盘的位置 第一个值为x轴,第二个值为y轴
startAngle:180,//开始角度
endAngle:0,//结束角度
splitNumber: "none",//刻度的值,如果设置为0,在IE8中,左上角有多一块内容,不需要显示就设置为none,需要显示就设置具体数值,如10
axisLine: { // 坐标轴线,也就是圆圈的边框线
show: false, // 默认显示,属性show控制显示与否
lineStyle: { // 属性lineStyle控制线条样式
//color: [[0.2, 'f9fafb'],[0.4, 'orange'],[0.8, 'skyblue'],[1, '#ff4500']],
width: 10
}
},
pointer: {//point为设置指针箭头的效果
//这个show属性好像有问题,因为在这次开发中,需要去掉指正,我设置false的时候,还是显示指针,估计是BUG吧,我用的echarts-3.2.3;希望改进。最终,我把width属性设置为0,成功搞定!
                    //当鼠标经过时会显示 箭头中间会显示一条白色的区域,这个区域可以通过css调整 如#map canvas[data-zr-dom-id=_zrender_hover_]{display: none!important;}
show: true,
//指针长度
length:'60%',
width:4,
color:"#000"
},
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
//color: '#333'
},
splitLine: { // 分隔线
show: false, // 默认显示,属性show控制显示与否
length :20, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
// color: '#eee',
width: 2,
type: 'solid'
}
},
title : {
show : false,
//offsetCenter: ['-65%', -10], // x, y,单位px
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333',
fontSize : 15
}
},
detail : {//最下边数值的设置
show : true,
//backgroundColor: 'rgba(0,0,0,0)',
// borderWidth: 0,
// borderColor: '#ccc',
//width: 100,
//height: 40,
offsetCenter: ['0', '10'], // x, y,单位px
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#3ebf27',
fontSize : 18
}
},
axisTick: { // 坐标轴小标记
show: false, // 属性show控制显示与否,默认不显示
splitNumber: 5, // 每份split细分多少段
length :8, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: '#eee',
width: 1,
type: 'solid'
}
} }
]
};
var authWay = ec.init(document.getElementById("map"));
authWay.setOption(option);
window.onresize = authWay.resize;
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=1000">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/chart/echarts.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>

echarts仪表盘配置参数的更多相关文章

  1. [转载]fullPage.js中文api 配置参数~

    fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 ...

  2. kafka配置参数

    Kafka为broker,producer和consumer提供了很多的配置参数. 了解并理解这些配置参数对于我们使用kafka是非常重要的.本文列出了一些重要的配置参数. 官方的文档 Configu ...

  3. MySQL Cluster 7.3.5 集群配置参数优化(优化篇)

    按照前面的教程:MySQL Cluster 7.3.5 集群配置实例(入门篇),可快速搭建起基础版的MySQL Cluster集群,但是在生成环境中,还是有很多问题的,即配置参数需要优化下, 当前生产 ...

  4. mha配置参数详解

    mha配置参数详解: 参数名字 是否必须 参数作用域 默认值 示例 hostname Yes Local Only - hostname=mysql_server1, hostname=192.168 ...

  5. 微信公众号网页开发-jssdk config配置参数生成(Java版)

    一.配置参数 参考官方文档:http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&la ...

  6. 项目中Zookeeper配置参数笔记

    ZooKeeper是以Fast Paxos算法为基础的,Paxos 算法存在活锁的问题,即当有多个proposer交错提交时,有可能互相排斥导致没有一个proposer能提交成功,而Fast Paxo ...

  7. Hadoop2.6.0配置参数查看小工具

    前言 使用Hadoop进行离线分析或者数据挖掘的工程师,经常会需要对Hadoop集群或者mapreduce作业进行性能调优.也许你知道通过浏览器访问http://master:18088/conf来查 ...

  8. struts2学习笔记之四:多配置文件支持和常用配置参数

    struts2支持可以按照不同模块分类的方式拆分配置文件,支持多人分工合作,各自维护自己的配置文件,但是所有配置文件中包名和action的名称不能重复   struts2的配置文件方式有两种,stru ...

  9. redis pool config的配置参数

    .获取jedis实例时,实际上可能有两类错误.一类是pool.getReource(),得不到可用的jedis实例:另一类是jedis.set/get时出错也会抛出异常:为了实现区分,所以根据inst ...

随机推荐

  1. CentOS7下Rsync+sersync实现数据实时同步

    近期公司要上线新项目,后台框架选型我选择当前较为流行的laravel,运行环境使用lnmp. 之前我这边项目tp32+apache,开发工具使用phpstorm. 新建/编辑文件通过phpstorm配 ...

  2. iOS开源项目周报0316

    由OpenDigg 出品的iOS开源项目周报第十二期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等.GodEye  ...

  3. Windows窗体技术及基础控件

    创建winform程序 Visual studio是一套完整的开发工具集 RAD 工具(rapid application development) 创建用户界面时,把控件从工具箱拖放到窗体上,把它们 ...

  4. Java - 枚举与注解

    Enumeration 于Java 1.5增加的enum type... enum type是由一组固定的常量组成的类型,比如四个季节.扑克花色. 在出现enum type之前,通常用一组int常量表 ...

  5. 撩课-每天刷Web面试题(前10天汇总)-Day12

    一.算法题部分 1. 如何获取浏览器URL中查询字符串中的参数 function getParamsWithUrl(url) { var args = url.split('?'); ] === ur ...

  6. Max Sum(经典DP)

    求最长总和序列,状态转移方程:dp[i] = max(dp[i-1]+a[i].a[i]) 因为可能有负数,所以要判断dp是否大于0,如果小于0则序列中断,从中断点开始 起始点可以用数组s保存,有中断 ...

  7. jQuery处理JSONP

    http://www.g7blogs.com/?p=821 作为一枚前端,提起jsonp大家都不会陌生.特别是在我们组内的业务中,和服务器端交互的数据几乎都是采用这种形式.但假如要让你用原生的JS写出 ...

  8. 【数据库】java链接jdbc 释放资源

    /* *   编写快速 入门的jdbc 程序 : *    *    1. 先导入 具体的驱动jar包 *    2. 编写一个类 , 写jdbc 的程序 *  *  具体的编写 java类的 代码的 ...

  9. 前端把html表格生成为excel表格

    最近公司改后台管理系统.要求导出台账项目等等为excel表格,找半天还真有,他是通过query.table2excel.js 实现,原谅我原生不会弄这个当然大家有可以给我留言. <!DOCTYP ...

  10. C#编写强大的SQL Server数据库自动备份服务

    数据库自动备份服务,带配置,还算可以吧 周末抽时间,编写了一个这样的工具,可以让,对数据库不了解或不熟悉的人,直接学会使用备份,省时省力,同样,我也将一份,通过脚本进行备份的,也奉献上来, 通过sql ...