@bizcharts/theme-demo v0.1.2

ThemeDemo

@bizcharts/theme-demo Use with @bizcharts/theme-build

Install

npm install @bizcharts/theme-demo --save

API

import ThemeBuild from '@bizcharts/theme-build';
import { OrangeTheme, BlueTheme, PurpleTheme, GreenTheme, Bar, Interval, Line, Pie } from '@bizcharts/theme-demo';

class ChartLevelSetTheme extends React.Component {
  render() {
    return [
      <div className="group" key="PurpleTheme">
        <h3>chart级PurpleTheme</h3>
        <div className="charts">
          <Bar bizTheme={ThemeBuild(PurpleTheme)} />
          <Interval bizTheme={ThemeBuild(PurpleTheme)} />
        </div>
      </div>,
      <div className="group" key="BlueTheme">
        <h3>chart级BlueTheme</h3>
        <div className="charts">
          <Line bizTheme={ThemeBuild(BlueTheme)} />
          <Pie bizTheme={ThemeBuild(BlueTheme)} />
        </div>
      </div>,
      <div className="group" key="GreenTheme">
        <h3>chart级GreenTheme</h3>
        <div className="charts">
          <Bar bizTheme={ThemeBuild(GreenTheme)} />
          <Interval bizTheme={ThemeBuild(GreenTheme)} />
        </div>,
      </div>,
      <div className="group" key="OrangeTheme">
        <h3>chart级OrangeTheme</h3>
        <div className="charts">
          <Line bizTheme={ThemeBuild(OrangeTheme)} />
          <Pie bizTheme={ThemeBuild(OrangeTheme)} />
        </div>
      </div>
    ];
  }
}
ReactDOM.render(<ChartLevelSetTheme />, mountNode);

.group {
  margin-top: 20px;
}
.charts {
  display: flex;
}
.chart-box {
  width: 100%;
  margin: 5px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  marginbottom: 20;
}