---

$3

``sh
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
`

$3

- Automatic processing of boundary size layout
- Automatic adjustment of component container layout size change

$3

`tsx
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 (

);
}
``

$3

| 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[]](./src/flex-chart/model/index.ts) | [] |
| 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")[] | - |

$3

MIT License (c) 刘善保