---
title: 全局通用级别主题
order: 1
importStyle: true
---

```jsx
import { Radio } from '@alifd/next';
import { setTheme } from 'bizcharts';

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

const RadioGroup = Radio.Group;

const themeMap = {
  PurpleTheme,
  BlueTheme,
  GreenTheme,
  OrangeTheme
};

const themeList = [
  {
    value: 'PurpleTheme',
    label: '紫色主题'
  },
  {
    value: 'BlueTheme',
    label: '蓝色主题'
  },
  {
    value: 'GreenTheme',
    label: '绿色主题'
  },
  {
    value: 'OrangeTheme',
    label: '橙色主题'
  }
];

class GlobalLevelSetTheme extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: 'PurpleTheme'
    };
  }

  onChange = value => {
    this.setState({
      value: value
    });
    console.log('onChange', value);
  };

  render() {
    //一次setTheme，所有图表生效
    const bizTheme = ThemeBuild(themeMap[this.state.value]);
    // setTheme(bizTheme);

    return (
      <div className="group">
        <h3>全局通用级别主题</h3>
        <RadioGroup className="theme-select" dataSource={themeList} value={this.state.value} onChange={this.onChange} />
        <Bar bizTheme={bizTheme} forceUpdate />
        <Interval bizTheme={bizTheme} forceUpdate />,
        <Line bizTheme={bizTheme} forceUpdate />,
        <Pie bizTheme={bizTheme} forceUpdate />
      </div>
    );
  }
}
ReactDOM.render(<GlobalLevelSetTheme />, mountNode);
```

```css
.theme-select {
  padding: 15px;
  margin-bottom: 10px;
}
.theme-select label {
  margin-right: 30px;
}
.theme-select .next-radio {
  margin-right: 5px;
}
.chart-box {
  margin-bottom: 20px;
}
```