echarts 小技巧——绘制进度条

一、饼状图绘制进度条

思路：两个主要参数：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
            }
          }
        }
      ]
    };
  }