1.2.5 • Published 1 year ago
flex-chart v1.2.5
flex chart
Install
npm i flex-chart
# yarn add flex-chart
# `echarts` is the peerDependence of `flex-chart`, you can install echarts with your own version.
npm install --save echarts
Features
- Automatic processing of boundary size layout
- Automatic adjustment of component container layout size change
Usage
import { FlexChart } from "flex-chart";
const mockData = [
{
name: "ClothingClothingSalesVolume",
data: [
{name: "shirt", value: 50}, {name: "cardigan", value: 200},
{name: "chiffon-shirt", value: 360}, {name: "trousers", value: 100},
{name: "high-heeled-shoes", value: 100}, {name: "socks", value: 560},
],
},
{
name: "ClothingClothingStock",
data: [
{name: "shirt", value: 20}, {name: "cardigan", value: 90},
{name: "chiffon-shirt", value: 170}, {name: "trousers", value: 30},
{name: "high-heeled-shoes", value: 208}, {name: "socks", value: 120},
],
},
{
name: "ClothingClothingDamage",
data: [
{name: "shirt", value: 50}, {name: "cardigan", value: 230},
{name: "chiffon-shirt", value: 80}, {name: "trousers", value: 101},
{name: "high-heeled-shoes", value: 70}, {name: "socks", value: 302},
],
},
{
name: "ClothingClothingReturn",
data: [
{name: "shirt", value: 37}, {name: "cardigan", value: 113},
{name: "chiffon-shirt", value: 59}, {name: "trousers", value: 91},
{name: "high-heeled-shoes", value: 34}, {name: "socks", value: 207},
],
},
];
function App() {
return (
<div style={{ width: "100%", height: "100%" }}>
<FlexChart data={mockData}/>
</div>
);
}
Documentation
Property | Description | Type | Default |
---|---|---|---|
autoFit | adjust proportionally according to the page width | boolean | false |
autoResize | decide whether to trigger when parent component container resize | boolean | - |
barSeries | set bar series data option | EChartOption.SeriesBar | - |
data | data source | FlexChartDataItem[] | [] |
direction | chart direction | "vertical""horizontal""verticalInverse""horizontalInverse" | "vertical" |
initOpts | echarts initialization parameter configuration | EchartsInitOpts | - |
initTheme | echarts Initialization Style Theme Configuration | string | object | - |
lineSeries | set line series data option | EChartOption.SeriesLine | - |
mergeOption | whether to merge the echarts configuration | boolean | true |
onChartLoad | chart load event | (chartsInstance: EChartsType) => void | - |
onEvents | echarts mouse event monitoring | FlexChartEventsType | - |
options | configuration parameters of echarts | EChartOption | - |
seriesTypes | series data type | ("bar" | "line") | ("bar" | "line")[] | - |
License
MIT License (c) 刘善保