# bonree-charts

The simplest, and the best React wrapper for [Apache ECharts](https://github.com/apache/incubator-echarts).

![ECharts Ver](https://img.shields.io/badge/echarts-%5E5.0.0-blue.svg)
![React Ver](https://img.shields.io/badge/React-%20%5E16.0.0%20%7C%7C%20%20%5E17.0.0-blue.svg)

## Install

```bach
$ npm install --save bonree-charts

# `echarts` is the peerDependence of `bonree-charts`, you can install echarts with your own version.
$ npm install --save echarts
```

Then use it.

1、webpack config babel

- umi:
```ts
export default defineConfig({
  ...
  extraBabelPlugins: [
    ...
    ['import', { libraryName: 'bonree-npm-cli', camel2DashComponentName: false, style: false }, 'bonree-npm-cli']
    ...
  ]
  ...
});
```

- create-react-app
```ts
module.exports = {
  ...
  babel: {
    plugins: [
      ...
      ['import', { libraryName: 'bonree-npm-cli', camel2DashComponentName: false, style: false }, 'bonree-npm-cli'],
      ...
    ]
  },
  ...
}
```
2、use
```tsx
import React from 'react';
import { BrChartsCore } from 'bonree-charts';
import * as echarts from 'echarts/core'
import { LineChart } from 'echarts/charts';
import { TooltipComponent, GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([LineChart,TooltipComponent, GridComponent,  CanvasRenderer]);
const Page: React.FC = () => {
  const options = {
    grid: { top: 8, right: 8, bottom: 24, left: 36 },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
  };

  return (
    <div style={{ padding: '10px 20px', height: "300px" }}>
      <BrChartsCore echarts={echarts} option={options} />
    </div>
  )
};

export default Page;
```

