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 ...
随机推荐
- Node.js之Console用法小结
/** * Created by city--online on 16/3/9. */ //console.time()和console.timeEnd()输出中间代码的执行时间(注意:time和ti ...
- IOS项目之弹出动画终结篇
在之前写过IOS项目之弹出动画一.IOS项目之弹出动画二.IOS项目之弹出动画三,今天来一个终极封装已经上传到Github上弹出动画总结篇UIPopoverTableView. UIPopoverTa ...
- excel 工作表如何插入当前日期时间
在EXCEL表格中,插入当前的日期或是插入当前的时间:我们都可以用快捷键或时间函数来实现 插入当前日期 快捷键方法: 比如,显示日期的单元格为A1单元格: 今天是2018年6月8日: 鼠标点一下A1单 ...
- Python——爬虫学习1
爬虫了解一下 网络爬虫(Web crawler),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本. Python的安装 本篇教程采用Python3 来写,所以你需要给你的电脑装上Python ...
- SQL 之开启远程访问
转载自 http://blog.csdn.net/happymagic/article/details/51835522 SQL Server 开启远程访问的方法: 注意事项:(重点) 此次演示版本 ...
- MapReduce详解和WordCount模拟
最早接触大数据,常萦绕耳边的一个词「MapReduce」.它到底是什么,能做什么,原理又是什么?且听下文讲解. 是什么 MapReduce 即是一个编程模型,又是一个计算框架,它充分采用了分治的思想, ...
- 认识Groovy
什么是groovy: Groovy 是 JVM 的一个替代语言 —替代 是指可以用 Groovy 在 Java 平台上进行 Java 编程,使用方式基本与使用 Java 代码的方式相同. 在编写新应用 ...
- 解决:启动项目报错 java.lang.UnsatisfiedLinkError: D:\Java\apache-tomcat-8.0.17\bin\tcnative-1.dll: Can't load IA 32-bit .dll on a AMD 64-bit platform
启动项目报错如下: java.lang.UnsatisfiedLinkError: D:\Java\apache-tomcat-8.0.17\bin\tcnative-1.dll: Can't loa ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
- 前端学习之路之CSS (四)
Infi-chu: http://www.cnblogs.com/Infi-chu/ CSS盒子模型 概念:CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际 ...