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) 刘善保