一：说明： 上下结构的进度条组件

二：使用： npm i @czty/lprogress1

import React from 'react'; import LProgress1 from '@czty/lprogress1';

const MyComponent = () => { return ( <LProgress1 draggable={true} configer={ x: 0, y: 0, clazz : '', params : {}, url : '', method : 'get', data: [10, 20, 30, 40, 50, 60, 70, 80], title: ['杭州市', '湖州市', '宁波市', '温州市', '丽水市', '台州市', '绍兴市', '金华市'], total: 100,

    width: '400px',
    height: '704px',
    liMarginBot: '24px',
    
    rankText: 'NO.',
    rankNum: 3,
    rankIcon: ['', ''],
    rankBackground: ['', ''],

    progressBg: './images/sft/progressbg.png',
    progressOutHeight: '14px',
    progressInHeight: '7px',
    pBorderRadius: '0px',

    progressOutColor: 'rgba(55, 95, 144, 0.5)',
    progressInColor: ['linear-gradient(90deg, #1A293B, #FF7723)','linear-gradient(90deg, #1A293B, #1CE5FF)'],

    textColor: '#fff',
    textSize: '14px',
    textStyle: 'italic',
    textBgUrl: ['./images/sft/progressbg.png', 'none'],

    nameColor: '#fff',
    nameSize: '14px',

    numSize: '14px',
    numColor: ['#FF6E23', '#20FDFF'],
    isScroll: '是',
    nameField: 'cityName',
    valueField: 'totalScore',
    makeUpZero: '否'
  }
/>

) }

三：字段说明 x: y: clazz: 可添加的组件的className params: 请求的传参参数 url: 请求的url地址 method: 请求方式 width: 组件的整体宽度 height: 组件的整体高度 data: 数据 title: 数据标题 total: 总数 liMarginBot：每行下边距 rankText: 排行文字说明 rankNum: 排行前几区别 rankIcon: 排行文字说明背景url rankBackground：排行文字说明背景颜色 progressBg：进度条结束背景url progressOutHeight：进度条外廓高度 progressInHeight: 进度条进度高度 pBorderRadius：进度条边框角度 progressOutColor：进度条外廓颜色 progressInColor: 进度条进度颜色 textColor: 排行文字说明字体颜色 textSize: 排行文字说明字体大小 textStyle: 排行文字说明字体样式 textBgUrl：排行文字说明背景url nameColor：名称文字颜色 nameSize：名称文字大小 numSize：排行数据文字字号 numColor：排行数据文字颜色 nameField：名称字段 valueField：排行数据字段 isScroll：是否滚动 makeUpZero：排行小于10是否前补0