<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="./sources/echarts/echarts.min.js"></script>
</head>
<body style="background-color:#151414">
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
series: [
{
type:'gauge',
center: ['250px', '50%'], //**调整仪表盘的位置**
splitNumber: 10, // 分割段数，默认为5
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.1, '#228b22'],[0.9, '#48b'],[1, '#ff4500']],
width: 6
}
},
axisTick: { // 坐标轴小标记
splitNumber: 10, // 每份split细分多少段
length :12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto'
}
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :18, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer : { //指针大小
width : 5
},
title : {
show : true,
offsetCenter: [0, '-40%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
}
},
detail : {
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto',
fontWeight: 'bolder'// 下面data数据的字体设置！！！！
}
},
data:[
{
value: 23,
name: '百分比1',
title:{
show:true,
fontSize:16,
color:'red',
fontWeight:'normal',
offsetCenter:[0,'-25%']
}
}
]
},
{
type:'gauge',
center: ['700px', '50%'], //**调整仪表盘的位置**
splitNumber: 10, // 分割段数，默认为5
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.1, '#228b22'],[0.9, '#48b'],[1, '#ff4500']],
width: 6
}
},
axisTick: { // 坐标轴小标记
splitNumber: 10, // 每份split细分多少段
length :12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto'
}
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :18, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer : { //指针大小
width : 5
},
title : {
show : true,
offsetCenter: [0, '-40%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
}
},
detail : {
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto',
fontWeight: 'bolder'// 下面data数据的字体设置！！！！
}
},
data:[
{
value: 67,
name: '百分比2',
title:{
show:true,
fontSize:16,
color:'red',
fontWeight:'normal',
offsetCenter:[0,'-25%']
}
}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
posted on
