根据开源组件修改而来，原先的内容写死不灵活。

① 修复像素单位写死导致大分辨率错位

② 修复绘制内容居中显示

效果如下

第一步 导入组件 

import progressBar from '@/components/chocolate-progress-bar/chocolate-progress-bar.vue'

第二步 引入组件 

components: {progressBar},

第三步 添加模板代码 

<view class="cu-bar bg-white solid-bottom">
    <view class="action">
        <text class="cuIcon-title text-blue-m"></text>今日在线</view>
</view>
<view class="bg-white text-center">
    <progressBar ref="progressBar"></progressBar>
</view>

第四步 往组件接口传参 

var json = {};
//底部左边数值
json['progress_left_num'] = 0;
//底部右边数值
json['progress_right_num'] = parseInt(res.data.day_online_time/3600);
//底部左边数值 是否显示
json['progress_left_show'] = true;
//底部右边数值 是否显示
json['progress_right_show'] = true;
//中间数值下面的文本描述
json['progress_name'] = '在线时长';
//中间数值的单位
json['progress_unit'] = '%';
//进度条正常颜色
json['process_normal_front_color'] = '#1b9dff';
//进度条背景色
json['progress_bg_color'] = '#E9E9E9';
// 是否开启渐变色 开启的话单一默认色无效 但是 show_special_front_color 为true可以生效
json['process_show_gradient'] = false;
//开始渐变色
json['process_gradient_begin_color'] = '#FFA68C';
//结束渐变色
json['process_gradient_end_color'] = '#FF3B1D';
//中间数值 
json['progress_txt'] = 90;
//如果进度条饱满 是否显示特殊进度条颜色
json['show_special_front_color'] = true;
//进度条宽度
json['process_line_width'] = 12;
console.log(json);
//重新更新进度条数据
this.$refs.progressBar.initData(json);
//重新绘制
this.$refs.progressBar.flushDraw();

 组件下载