echarts仪表盘配置参数
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仪表盘配置参数的更多相关文章
- [转载]fullPage.js中文api 配置参数~
fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 ...
- kafka配置参数
Kafka为broker,producer和consumer提供了很多的配置参数. 了解并理解这些配置参数对于我们使用kafka是非常重要的.本文列出了一些重要的配置参数. 官方的文档 Configu ...
- MySQL Cluster 7.3.5 集群配置参数优化(优化篇)
按照前面的教程:MySQL Cluster 7.3.5 集群配置实例(入门篇),可快速搭建起基础版的MySQL Cluster集群,但是在生成环境中,还是有很多问题的,即配置参数需要优化下, 当前生产 ...
- mha配置参数详解
mha配置参数详解: 参数名字 是否必须 参数作用域 默认值 示例 hostname Yes Local Only - hostname=mysql_server1, hostname=192.168 ...
- 微信公众号网页开发-jssdk config配置参数生成(Java版)
一.配置参数 参考官方文档:http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&la ...
- 项目中Zookeeper配置参数笔记
ZooKeeper是以Fast Paxos算法为基础的,Paxos 算法存在活锁的问题,即当有多个proposer交错提交时,有可能互相排斥导致没有一个proposer能提交成功,而Fast Paxo ...
- Hadoop2.6.0配置参数查看小工具
前言 使用Hadoop进行离线分析或者数据挖掘的工程师,经常会需要对Hadoop集群或者mapreduce作业进行性能调优.也许你知道通过浏览器访问http://master:18088/conf来查 ...
- struts2学习笔记之四:多配置文件支持和常用配置参数
struts2支持可以按照不同模块分类的方式拆分配置文件,支持多人分工合作,各自维护自己的配置文件,但是所有配置文件中包名和action的名称不能重复 struts2的配置文件方式有两种,stru ...
- redis pool config的配置参数
.获取jedis实例时,实际上可能有两类错误.一类是pool.getReource(),得不到可用的jedis实例:另一类是jedis.set/get时出错也会抛出异常:为了实现区分,所以根据inst ...
随机推荐
- linux和Android的Makefile和android.mk
1. makefile 1.1 gcc的参数 -Wall: 是打开警告开关, -O: 代表默认优化,可选:-O0不优化,-O1低级优化,-O2中级优化,-O3高级优化,-Os代码空间优化. -g ...
- Idea软件Vim插件问题
人家说用webstorm是纯前端,用Idea是java+前端,好,那就用Idea,装上试试,全选所有插件安装,奇迹出现了,选中一行代码,backspace,删不了,我的天,好吧,复制粘贴的快捷键也不行 ...
- facebook 登录开发记录
1.注册一个 facebook 的账号 2.进入 facebook 开发者的网站.(也可以在 facebook 登录后,点击自己的名字进入用户信息页面,在该页面的底部有个“更多”的链接,点击进去会看到 ...
- spring mongodb查询
MongoRepository 查询条件 Keyword Sample Logical result After findByBirthdateAfter(Date date) {"birt ...
- 第7天:javascript-DOM 获取标签、注册事件改变属性的值、innerText、改变属性的值等
javascript WEB api------DOM document object model 案例 为元素注册点击事件,弹出对话框 <input type="button&quo ...
- Java学习--Java 中基本类型和字符串之间的转换
Java 中基本类型和字符串之间的转换 在程序开发中,我们经常需要在基本数据类型和字符串之间进行转换. 其中,基本类型转换为字符串有三种方法: 1. 使用包装类的 toString() 方法 2. 使 ...
- java四则运算----前缀、中缀、后缀表达式
接到一个新需求,需要实现可配置公式,然后按公式实现四则运算. 刚拿到需求,第一反应就是用正则匹配‘(’,‘)’,‘+’,‘-’,‘*’,‘/’,来实现四则运算,感觉不复杂. 然后开始coding.发现 ...
- ArrayList封装
package com.cn.test.jihe; import java.util.Arrays; /** * * insert * delete * update * get * */ publi ...
- Shiro官方快速入门10min例子源码解析框架2-Session
Shiro自身维护了一套session管理组件,它可以独立使用,并不单纯依赖WEB/Servlet/EJB容器等环境,使得它的session可以任何应用中使用. 2-Session)主要介绍在quic ...
- 关于Python的那点吐槽
之前听到过别人有说过Python只是一个玩具做不了大项目,我当时是嗤之以鼻的,不说豆瓣这样的公司采用Python做的网站,GitHub上那么多大项目都是用Python写的,怎么能说Python只是一个 ...