一：说明： 左右结构的进度条组件

二：使用： npm i @czty/lprogress

import React from 'react'; import LProgress from '@czty/lprogress';

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

    rankText: 'TOP ',
    rankNum: 3,
    rankIcon: [],
    liHeight: '20px',
    liBg: 'none',

    progressHeight: '10px',
    progressOutColor: 'rgba(0, 0, 0, 0.1)',
    progressInColor: ['linear-gradient(90deg, #6B2F32, #BD4E4B)', 'linear-gradient(90deg, #1F5068, #16BCE0)'],

    textColor: '#FFF',
    textSize: '12px',
    textStyle: 'italic',

    nameColor: '#000',
    nameSize: '12px',

    numSize: '12px',
    numColor: ['#F46965', ' #61E2FF'],

    nameField: 'cityName',
    valueField: 'num',
    isScroll: '是',
    makeUpZero: '是'
  }
/>

) }

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