echart
12173 단어 프런트 엔드
var option=null,doc=null,mychart=null;
doc=document;
mychart=echarts.init(doc.getElementById("CPUBox"));
$(".chartsBox").height($(".chartsBox").width());
window.addEventListener('resize',function () {
$(".chartsBox").height($(".chartsBox").width());
},false);
option= {
tooltip : {
formatter: "{a}
{b} : {c}%"
},
toolbox: {
show:false,
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: 'CPU ',
type: 'gauge',
axisLine : {
show : true,
lineStyle : { // lineStyle
color : [ //
[ 0.5, "#0A69A3" ],//0-50%
[ 0.7, "#0A69A3" ],//51%-70%
[ 0.9, "#0A69A3" ],//70%-90%
[ 1,"#0A69A3" ]//90%-100%
],
width : 15//
}
},
splitLine : { // ( 10、20 )
length : 20,
lineStyle : { // lineStyle
width : 1
}
},
axisTick : { // ( )
length : 15
},
axisLabel : { // ( “10”、“20” )
color : "black",
distance : 5 //
},
detail: { //
formatter : "{score|{value}%}",
offsetCenter: [0, "40%"],
backgroundColor: '#FFEC45',
height:30,
rich : {
score : {
color : "white",
fontFamily : " ",
fontSize : 32
}
}
},
data: [{
value: 50,
name:"",
label: {
textStyle: {
fontSize: 10
}
}
}]
}
]
};
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
mychart.setOption(option, true);
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Vue.js】컴포넌트의 3개의 네비게이션 가드일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 그 이름에서 알 수 있듯이 무언가를 가드하기위한 처리로, 대체로 페이지 천이 전에 특정 처리를 실행시켜 페이지 천이시키지 않게 한다. Vue.js의 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.