initEcharts(dataArr) {
var echarts = require('echarts');
// 基于准备好的dom,初始化echarts实例
var myChart1 = echarts.init(document.getElementById(dataArr.id));
let options1 = {
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
series: [{
name: "内部进度条",
type: "gauge",
radius: '100%',
startAngle: 180, //开始角度
endAngle: 0, //结束角度
axisLine: {
lineStyle: {
color: [
[dataArr.value / 100, dataArr.color],
[1, "rgba(240, 242, 248, 1)"]
],
width: 30
}
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
show: false,
},
detail: {
formatter: function(value) {
if (value !== 0) {
var num = Math.round(value);
return parseInt(num).toFixed(0) + "%";
} else {
return '0%';
}
},
offsetCenter: [0, -30],
textStyle: {
padding: [0, 0, 0, 0],
fontSize: 18,
fontWeight: '700',
color: dataArr.color
}
},
title: { //标题
show: true,
offsetCenter: [0, 0], // x, y,单位px
textStyle: {
color: "#fff",
fontSize: 14, //表盘上的标题文字大小
fontWeight: 400,
fontFamily: 'PingFangSC',
color:"rgba(102, 102, 102, 1)"
}
},
data: [{
name: dataArr.name,
value: dataArr.value,
}],
pointer: {
show: false
},
animationDuration: 4000,
}, ]
}
// 绘制图表
myChart1.setOption(options1);
}
//调用
let dataArr = {
value:0,
id:"echarts1",
color:'rgba(67, 207, 39, 1)',
name:"CPU利用率"
}
this.initEcharts(dataArr)
echarts半圆进度条
最新推荐文章于 2024-02-28 14:55:47 发布