FlexChart

flex chart

Chart with automatic boundary layout size processing (encapsulated echarts)

---

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")[]	-
loading	chart的loading	boolean	false
loadingOption	chart的loading相关配置	LoadingOption	defaultLoadingOption

License

MIT License (c) 刘善保