bonree-charts v0.0.17

bonree-charts

The simplest, and the best React wrapper for Apache ECharts.

Install

$ 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:

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

• create-react-app

module.exports = {
  ...
  babel: {
    plugins: [
      ...
      ['import', { libraryName: 'bonree-npm-cli', camel2DashComponentName: false, style: false }, 'bonree-npm-cli'],
      ...
    ]
  },
  ...
}

2、use

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;