BizchartsThemeBuild

基于 fuison 主题的 BizCharts 主题编译模块

安装

npm install @bizcharts/theme-build

Demo debug

npm start

代码示例

@bizcharts/theme-build/docs/chartLevelSetTheme.md

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

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);

API

import ThemeBuild from '@bizcharts/theme-build';
const myThemeBuild = ThemeBuild({
  '$color-data1-1': '#26DAD0',
  '$color-data1-2': '#5C89FF',
  '$color-data1-3': '#7C6AF2',
  '$color-data1-4': '#C95FF2',
  '$color-data1-5': '#FF6383',
  '$color-data1-6': '#FF9F40',
  '$color-data1-7': '#FFCB48',
  '$color-data1-8': '#31DC72',
})