<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery 测试11</title>
<meta name="keywords" content="" />
<meta name="discription" content="" />
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script src="echarts.min.js"></script>
<script type="text/javascript">
$(function(){
var myChart = echarts.init(document.getElementById('myChart'));
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',
center : ['50%', '50%'], // 默认全局居中
radius : '100%',
min:0, //刻度的起始值
max:100, // 刻度的最大值
startAngle:180,//起始角度
endAngle:0, //终止角度
splitNumber:10,//大盘平均分成多少份
detail : {formatter:'{value}%'}, //仪表盘显示数据
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 '50' : return 'Gas';
case '100' : return 'F';
}
}
},
splitLine: { // 分隔线
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
width:3,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer: {
width:2,
shadowColor : '#fff', //默认透明
shadowBlur: 10
},
title : {
show: false
},
detail : {
show: false
},
data:[{value: 0.1, name: 'gas'}]
}
]
};
myChart.setOption(option,true);
})
</script>
</head>
<body>
<div id="myChart" style="width: 600px;height:400px;border:1px solid blue"></div>
</body>
</html>
echarts 各个属性意义注释
猜你喜欢
转载自wangdingxin.iteye.com/blog/2298219
今日推荐
周排行