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>
