仪表盘图表的基础用法
今天整理了echarts中仪表盘,话不多说。还是通过具体案例来讲解一下仪表盘的具体配置项,
var myChart = echarts.init(document.getElementById('main'));
var option = {
//提示框组件
//formatter表示提示框组件的显示内容格式 {a}表示系列名称,{b}表示类目值/数据名称/区域名称/系列名称
//{c}表示数组,{d}只在在饼图、仪表盘、漏斗图中表示所占百分比
tooltip: {
formatter: "{a} <br/>{c} {b}"
},
//工具栏组件
//工具栏各工具配置项,添加了两个工具 restore:配置项还原,saveAsImage:保存为图片
toolbox: {
show: true,
feature: {
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
series: [
//type:当type的值为gauge时,表示一个漏斗图表
//第一仪表盘
{
name: '速度',
type: 'gauge',
//控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
z: 3,
//min,max表示最小的数据值和最大的数据值,会映射到 minAngle
min: 0,
max: 220,
//仪表盘刻度的分割段数
splitNumber: 11,
//仪表盘半径
radius: '50%',
//仪表盘轴线相关配置
axisLine: {
//仪表盘轴线样式
lineStyle: { // 属性lineStyle控制线条样式
width: 10,
}
},
//仪表盘刻度样式
axisTick: {
length: 15, //刻度线长。支持相对半径的百分比
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
//仪表盘分隔线样式
splitLine: { // 分隔线
length: 20, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
//仪表盘刻度标签
axisLabel: {
backgroundColor: 'auto',
//文字块的圆角
borderRadius: 15,
color: '#eee',
padding: 3,
//textShadowBlur:文字本身的阴影长度
textShadowBlur: 2,
//textShadowOffsetX:文字本身的阴影 X 偏移
textShadowOffsetX: 1,
//textShadowOffsetY:文字本身的阴影 Y 偏移
textShadowOffsetY: 1,
//textShadowColor:文字本身的阴影颜色
textShadowColor: '#222'
},
//仪表盘标题,显示data中name的属性。
title: {
// 其余属性默认使用全局文本样式
fontWeight: 'bolder',
fontSize: 20,
//文字字体的风格,可选参数:normal、italic、oblique
fontStyle: 'italic'
},
//仪表盘详情,用于当前仪表盘的数据
detail: {
//格式化函数或者字符串
formatter: function(value) {
value = (value + '').split('.');
value.length < 2 && (value.push('00'));
return ('00' + value[0]).slice(-2) +
'.' + (value[1] + '00').slice(0, 2);
},
fontWeight: 'bolder',
borderRadius: 3,
backgroundColor: '#444',
borderColor: '#aaa',
borderWidth: 2,
//文字块的背景阴影设置
shadowBlur: 5,
shadowColor: '#333',
shadowOffsetX: 0,
shadowOffsetY: 3,
//文字本身的描边
textBorderColor: '#000',
textBorderWidth: 2,
//文字本身的阴影
textShadowBlur: 2,
textShadowColor: '#fff',
textShadowOffsetX: 0,
textShadowOffsetY: 0,
fontFamily: 'Arial',
width: 100,
color: '#eee',
rich: {}
},
//传入数据,默认为40
data: [{
value: 40,
name: 'km/h'
}]
},
//第二个仪表盘
{
name: '转速',
type: 'gauge',
//用于定位图表位置
center: ['20%', '55%'], // 默认全局居中
radius: '35%',
min: 0,
max: 7,
//仪表盘结束角度
endAngle: 45,
splitNumber: 7,
//仪表盘轴线相关配置
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 8
}
},
//仪表盘刻度样式
axisTick: { // 坐标轴小标记
length: 12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
//仪表盘分隔线样式
splitLine: { // 分隔线
length: 20, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
//仪表盘指针
pointer: {
//指针宽度
width: 5,
//指针长度,可以是绝对数值,也可以是相对于半径的半分比。
length: '80%'
},
//仪表盘标题
title: {
//相对于仪表盘中心的偏移位置
offsetCenter: [0, '-30%'], // x, y,单位px
},
//仪表盘详情,用于显示当前仪表盘的数据
detail: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder'
},
data: [{
value: 1.5,
name: 'x1000 r/min'
}]
},
//第三个仪表图
{
name: '油表',
type: 'gauge',
center: ['77%', '50%'], // 默认全局居中
radius: '25%',
min: 0,
max: 2,
//仪表盘起始角度, 正右手侧为0度
startAngle: 135,
//仪表盘结束角度
endAngle: 45,
splitNumber: 2,
//仪表盘轴线相关配置
axisLine: {
lineStyle: { // 属性lineStyle控制线条样式
width: 8
}
},
//仪表盘刻度样式
axisTick: {
splitNumber: 5,
length: 10, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
//仪表盘刻度标签
axisLabel: {
//每个刻度的文本格式
formatter: function(v) {
switch (v + '') {
case '0':
return 'E';
case '1':
return 'Gas';
case '2':
return 'F';
}
}
},
//仪表盘分隔线
splitLine: {
length: 15, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
//仪表盘指针
pointer: {
width: 2
},
//仪表图标题
title: {
show: false
},
//仪表盘详情,用于显示当前仪表盘的数据
detail: {
show: false
},
data: [{
value: 0.5,
name: 'gas'
}]
},
//第四个仪表盘
{
name: '水表',
type: 'gauge',
center: ['77%', '50%'], // 默认全局居中
radius: '25%',
min: 0,
max: 2,
startAngle: 315,
endAngle: 225,
splitNumber: 2,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 8
}
},
axisTick: { // 坐标轴小标记
show: false
},
axisLabel: {
formatter: function(v) {
switch (v + '') {
case '0':
return 'H';
case '1':
return 'Water';
case '2':
return 'C';
}
}
},
splitLine: { // 分隔线
length: 15, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
pointer: {
width: 2
},
title: {
show: false
},
detail: {
show: false
},
data: [{
value: 0.5,
name: 'gas'
}]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true);
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, true);
}, 2000);
看下列具体效果图,
在上述案例中,一共配置了四个仪表盘,通过 series组件中的center改变圆心的位置,对图表进行定位,使页面显示出现类似汽车表盘的效果。
在上述案例中用到的配置项有tooltip组件、toolbox组件、series组件
,我们具体分析一下series组件的内容
- type:当type的值为funnel时,表示一个漏斗图表
- z:控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
- min,max:表示最小的数据值和最大的数据值,会映射到 minAngle
- splitNumber:表示仪表盘刻度的分割段数
- radius:仪表盘半径
- center:通过定位圆心来定位图表的位置
- axisLine:仪表盘轴线相关配置,用于对轴线进行各种配置
- lineStyle:仪表盘轴线样式,可以修改轴线的宽度和颜色
- axisTick:仪表盘刻度样
- length:刻度线长度,可以是数值和相对半径的百分比。刻度包含分割线,但是分隔线不包括刻度。
- lineStyle:用于设置控制线条样式
- splitLine:仪表盘分隔线样式
- length:分隔线长度
- lineStyle:控制线条样式
- axisLabel:仪表盘刻度标签 ,每个分隔线后有一个刻度标签
- title:仪表盘标题,显示data中name的属性
- detail:仪表盘详情,用于当前仪表盘的数据
- pointer:仪表盘指针。用于对指针进行样式配置
- startAngle:仪表盘起始角度, 正右手侧为0度。默认值为225
- endAngle:仪表盘结束角度。默认值为-45
可以通过startAngle和endAngle两个属性来控制仪表盘轴线的显示位置。