echarts各个属性意义注释
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="/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.ElementById('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
},
fontweight意义
data:[{value: 0.1, name: 'gas'}]
}
]
};
myChart.setOption(option,true);
})
</script>
</head>
<body>
<div id="myChart" ></div>
</body>
</html>