需要写3个仪表盘，这里写了一个函数：
绿色的背景是div的背景
warnFunc = (
id,
dataValue)
=> {
// 基于准备好的dom，初始化echarts实例
let
wranIndex1 =
document.
getElementById(
`
${
id
}
`);
// 设置canvas的高度
let
canvasHeight =
function () {
wranIndex1.
style.
height =
100 +
'px';
console.
log(
wranIndex1.
style.
height,
'能获取高度吗')
}
canvasHeight();
//先设置以上，高度才能生效，位置不要变
var
myChart =
echarts.
init(
wranIndex1);
var
spirit =
''
// 绘制图表
myChart.
setOption({
backgroundColor:
'transparent',
toolbox: {
show :
true,
},
series : [
{
name:
'货量预警',
type:
'gauge',
min:
0,
max:
100,
//设置仪表盘最大值
splitNumber:
4,
//设置仪表盘间隔个数
radius:
'100%',
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [[
0.2,
'lime'],[
0.82,
'#1e90ff'],[
1,
'#ff4500']],
width:
3,
shadowColor :
'#fff',
//默认透明
shadowBlur:
10
}
},
axisLabel: {
// 坐标轴小标记
textStyle: {
// 属性lineStyle控制线条样式
fontWeight:
'bolder',
color:
'#fff',
shadowColor :
'#fff',
//默认透明
shadowBlur:
10
}
},
axisTick: {
// 坐标轴小标记
length :
8,
// 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color:
'auto',
shadowColor :
'#fff',
//默认透明
shadowBlur:
10
}
},
splitLine: {
// 分隔线
length :
10,
// 属性length控制线长
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
width:
3,
color:
'#fff',
shadowColor :
'#fff',
//默认透明
shadowBlur:
10
}
},
axisLabel: {
color:
'auto',
//仪表盘的数字颜色，设置为auto表示跟着盘对应的颜色走
textShadowBlur:
2,
fontSize:
8,
//设置仪表盘数字的大小
padding: -
3,
//设置仪表盘数字与刻度线的距离
},
pointer: {
// 分隔线
shadowColor :
'#fff',
//默认透明
shadowBlur:
5
},
pointer: {
width:
2,
//设置仪表盘的指针 pointer要分开写属性不然会报错
},
detail: {
fontSize:
15,
//设置data内容的字体大小
offsetCenter: [
0,
'20%'],
//设置data内容的位置
},
data:[{
value:
`
${
dataValue
}
`}]
},
]
})
//用于使chart自适应高度和宽度
window.
onresize =
function () {
myChart.
resize();
canvasHeight();
//重新获取高度
};
}
以上是写仪表盘的函数，因为需要写3个就封装函数，传入的参数有，id和百分比
调用函数：
self.
warnFunc(
"wranIndex1",
50)
//预警
self.
warnFunc(
"wranIndex2",
20)
//预警
self.
warnFunc(
"wranIndex3",
70)
//预警