一、饼状图绘制进度条
思路:两个主要参数:1、当前进度 2、总进度,然后再对应设置不同的背景图即可
getPieOption() {
const pieData = this.systemInfo.hardDiskRatio;
const total = 100;
this.pieOption = {
tooltip: {
show: false,
trigger: 'item',
formatter: '{a} : {a} ({a}%)'
},
title: {
text: '磁盘使用率' + '\n' + pieData + '%' + '\n' + this.systemInfo.remainHardDisk + 'G/' + this.systemInfo.totalHardDisk + 'G',
top: '38%',
textAlign: 'center',
left: '49%',
textStyle: {
color: '#fff',
}
},
color: [this.systemInfo.remainHardDisk > 100 - this.freeHardDisk ? '#ba2e2b' : '#33a0ff', '#0d2854'],
legend: {
x: '40%',
top: '50%',
itemHeight: 10, // 图例的高度
itemGap: 8, // 图例之间的间距
// data: ['磁盘使用率' + pieData + '%']
},
series: [
{
name: '磁盘使用率' + pieData + '%',
type: 'pie',
radius: ['50%', '60%'],
label: {
show: false,
position: 'center',
},
labelLine: {
normal: {
show: false
}
},
emphasis: {
label: {
color: '#fff ',
show: false,
fontSize: '20',
fontWeight: 'bold'
}
},
data: [
{
value: pieData, // 需要显示的数据
itemStyle: {
normal: {
label: {
show: true,
textStyle: {color: '#3c4858', fontSize: '18'}
},
color: this.systemInfo.hardDiskRatio > 100 - this.freeHardDisk ?'#ba2e2b' : '#33a0ff'
}
}
},
{
value: total - pieData,
itemStyle: {
normal: {
color: '#215097'
}
}
}
]
}
]
};
}
实现效果:
二、柱状图绘制进度条
思路:当前值,总值,然后提供两种不同的背景色。对于数据类型而言,支持number
// 柱状图绘制进度条
getBarData() {
const startTime = this.startTime;
const endTime = this.endTime;
console.log(startTime);
console.log(endTime, 'eee');
const fomartStartTime = this.format(this.startTime);
const fomartEndTime = this.format(this.endTime) + fomartStartTime;
console.log(fomartEndTime, 'fomartEndTime');
this.barOption = {
grid: {
left: '0',
top: '0',
right: '0',
bottom: '0',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false},
axisLine: {show: false},
},
yAxis: {
type: 'category',
axisTick: {show: false},
axisLine: {show: false},
axisLabel: {
color: 'rgba(255,255,255,0.6)',
fontSize: 14
},
data: [startTime]
},
series: [
{
name: '%',
type: 'bar',
barWidth: 19,
data: [fomartStartTime],
label: {
show: true,
position: 'right',
offset: [0, 0],
formatter: function (value, index) {
return value = endTime;
},
color: 'rgba(255,255,255,0.6)',
fontSize: 14
},
itemStyle: {
normal: {
barBorderRadius: 10,
color: 'rgba(3,131,206, 0.6)'
}
},
zlevel: 1
},
{
name: '进度条背景',
type: 'bar',
barGap: '-100%',
barWidth: 19,
data: [fomartEndTime],
color: 'rgba(23,52,103, 0.6)',
itemStyle: {
normal: {
barBorderRadius: 10
}
}
}
]
};
}