一:说明: 单根柱子的柱状图组件
二:使用: npm i @zsqcli/lchartbar
import React from 'react'; import Lchartbar from '@zsqcli/lchartbar';
const MyComponent = () => { return ( <Lchartbar draggable={true} configer={ x: 0, y: 0, clazz : '', params : {}, url: '', method: 'get', data: [3, 3, 4, 29, 40],
width: '400px',
height: '200px',
xdata: ['2022-04-02', '2022-04-01', '2022-03-30', '2022-03-29', '2022-03-28'],
xType: 'date',
xFormatter: 'MM-dd',
axisTextColor: 'rgb(137, 171, 205)',
barWidth: 10,
barbackground: 'rgba(55, 95, 144, 0.5)',
barItemColor: ['rgba(36, 226, 254, 1)', 'rgba(21, 52, 86, 1)'],
pictorialBar: false,
options: {}
}
/>
) }
三:字段说明 x: y: clazz: 可添加的组件的className params: 请求的传参参数 url: 请求的url地址 method: 请求方式 width: 组件的整体宽度 height: 组件的整体高度 data:数据 xdata:x轴数据 xType:x轴值类型 xFormatter:x轴值格式方式 // 只作用xType='date'日期类型 axisTextColor:轴刻度值字体颜色 barWidth:柱子宽度 barbackground:柱子背景层颜色 barItemColor:柱子颜色 pictorialBar:是否是象形柱图 options:饼图option选项