Echarts 3.x仪表盘常用API示例
2018-07-30 本文已影响434人
易冷zzz
采用Echarts3.x绘制仪表盘，官方只给出了一些基本的示例，设计仪表盘指针，刻度，分割线，显示的数据，仪表盘半径大小等参数均需要查API费时又费力，目前做了一个demo基本覆盖了仪表盘的常用API，方便日后查阅,代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts仪表盘练习</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="lib/echarts3.2.2.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {
backgroundColor: '#1b1b1b',
title:{
show:true,
text:"转速,速度仪表盘",
left:'center',
bottom: '30',
textStyle: {
fontSize: 18,
fontWeight:'normal',
color:"#fff"
},
},
tooltip : {
formatter: "{a} {b} : {c}"
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
series: [{
name: '速度',
type: 'gauge',//仪表盘类型
min: 0,//表盘最小值
max: 220,//表盘最大值
splitNumber: 11,//仪表盘分成11等份
radius: '50%',//仪表盘半径
axisLine: { // 坐标轴线(即最外层的圆环)
//length:55,
lineStyle: { //控制线条样式
color: [
[0.2, '#00ff00'],//表盘最大值的20%部分刻度显示的颜色
[0.8, '#1e90ff'],//表盘最大值的20%到80%部分刻度显示的颜色
[1, '#ff4500']//表盘最大值的80%到100%部分刻度显示的颜色
],
width: 8,//圆环宽度
shadowColor: '#fff', //默认透明
shadowBlur: 10//阴影模糊大小
}
},
axisLabel: { // 控制坐标轴刻度的数字样式
textStyle: { //控制刻度文本样式
fontWeight: 'bolder',//刻度加粗
color: '#fff',//刻度颜色
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 控制仪表盘的刻度线样式
length: 15,
lineStyle: {
color: 'auto',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
splitLine: { // 控制分隔线样式(即表盘上长的刻度线)
length: 25, // 属性length控制线长
lineStyle: {
width: 3,
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
pointer: {//控制指针样式
shadowColor: '#fff', //默认透明
shadowBlur: 15,
width:6//控制指针宽度
},
title: {//仪表盘内标题(即data下value值的单位"km/h")
textStyle: {
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic',
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
detail: {//仪表盘详情，用于显示数据
backgroundColor: 'rgba(30,144,255,0.8)',
borderWidth: 1,
borderColor: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 5,
offsetCenter: [0, '50%'], //相对于仪表盘中心偏移
textStyle: {
fontWeight: 'bolder',
color: 'blue',
fontSize:24
}
},
data: [{
value: 40,
name: 'km/h'
}]
},
{
name: '转速',
type: 'gauge',
center: ['25%', '55%'], // 默认全局居中
radius: '30%',
min: 0,
max: 7,
endAngle: 45,
splitNumber: 7,
axisLine: {
lineStyle: {
color: [
[0.29, 'lime'],
[0.86, '#1e90ff'],
[1, '#ff4500']
],
width: 2,
shadowColor: '#fff',
shadowBlur: 10
}
},
axisLabel: {
textStyle: {
fontWeight: 'bolder',
color: '#fff',
shadowColor: '#fff',
shadowBlur: 10
}
},
axisTick: {
length: 12,
lineStyle: {
color: 'auto',
shadowColor: '#fff',
shadowBlur: 10
}
},
splitLine: {
length: 20,
lineStyle: {
width: 3,
color: '#fff',
shadowColor: '#fff',
shadowBlur: 10
}
},
pointer: {
width: 5,
shadowColor: '#fff',
shadowBlur: 5
},
title: {
offsetCenter: [0, '-30%'],
textStyle: {
fontWeight: 'bolder',
fontStyle: 'italic',
color: '#fff',
shadowColor: '#fff',
shadowBlur: 10
}
},
detail: {
borderColor: '#fff',
shadowColor: '#fff',
shadowBlur: 5,
width: 80,
height: 30,
offsetCenter: [25, '20%'],
textStyle: {
fontWeight: 'bolder',
color: '#ff0000'
}
},
data: [{
value: 1.5,
name: 'x1000 r/min'
}]
},
{
name: '油表',
type: 'gauge',
center: ['75%', '50%'], // 默认全局居中
radius: '30%',
min: 0,
max: 2,
startAngle: 135,
endAngle: 45,
splitNumber: 2,
axisLine: {
lineStyle: {
color: [
[0.2, 'lime'],
[0.8, '#1e90ff'],
[1, '#ff4500']
],
width: 2,
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: {
length: 12,
lineStyle: {
color: 'auto',
shadowColor: '#fff',
shadowBlur: 10
}
},
axisLabel: {
textStyle: {
fontWeight: 'bolder',
color: '#fff',
shadowColor: '#fff',
shadowBlur: 10
},
formatter: function(v) {
switch(v + '') {
case '0':
return 'E';
case '1':
return 'Gas';
case '2':
return 'F';
}
}
},
splitLine: {
length: 15,
lineStyle: {
width: 3,
color: '#fff',
shadowColor: '#fff',
}
},
pointer: {
width: 2,
shadowColor: '#fff',
shadowBlur: 5
},
title: {
show: false
},
detail: {
show: false
},
data: [{
value: 0.5,
name: 'gas'
}]
},
{
name: '水表',
type: 'gauge',
center: ['75%', '50%'],
radius: '30%',
min: 0,
max: 2,
startAngle: 315,
endAngle: 225,
splitNumber: 2,
axisLine: {
lineStyle: {
color: [
[0.2, 'lime'],
[0.8, '#1e90ff'],
[1, '#ff4500']
],
width: 2,
shadowColor: '#fff',
shadowBlur: 10
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
fontWeight: 'bolder',
color: '#fff',
shadowColor: '#fff',
shadowBlur: 10
},
formatter: function(v) {
switch(v + '') {
case '0':
return 'H';
case '1':
return 'Water';
case '2':
return 'C';
}
}
},
splitLine: {
length: 15,
lineStyle: {
width: 3,
color: '#fff',
shadowColor: '#fff',
shadowBlur: 10
}
},
pointer: {
width: 2,
shadowColor: '#fff',
shadowBlur: 5
},
title: {
show: false
},
detail: {
show: false
},
data: [{
value: 0.5,
name: 'gas'
}]
}]
};
myChart.setOption(option);
setInterval(function() {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
myChart.setOption(option);
}, 2000)
</script>
</body>
</html>
