@linkdesign/screen/demo/Chart_G2Chart/usage.md

屏组件库，但使用场景又不局限于屏。主要用于BI、大盘和屏

---
title: 组件示例
order: 2
---

## 基础用法

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { DemoWrapper, G2Chart, config } from '@linkdesign/screen';

const { _cssPrefix } = config;

const data = [
  { type: '未知', value: 654, percent: 0.02 },
  { type: '17 岁以下', value: 654, percent: 0.02 },
  { type: '18-24 岁', value: 4400, percent: 0.2 },
  { type: '25-29 岁', value: 5300, percent: 0.24 },
  { type: '30-39 岁', value: 6200, percent: 0.28 },
  { type: '40-49 岁', value: 3300, percent: 0.14 },
  { type: '50 岁以上', value: 1500, percent: 0.06 },
];

class App extends Component {
  render() {
    return (
      <DemoWrapper id="demo-Chart">
        <G2Chart
          title="柱状图"
          universalStyle={{
            width: 450,
            height: 240,
          }}
          config={{ padding: [50, 20, 50, 20] }}
          onInit={(chart) => {
            // 添加文本标注
            data.forEach((item) => {
              chart
                .annotation()
                .text({
                  position: [item.type, item.value],
                  content: item.value,
                  style: {
                    textAlign: 'center',
                    fill: '#d3e2ff',
                    stroke: null
                  },
                  offsetY: -30,
                })
                .text({
                  position: [item.type, item.value],
                  content: (item.percent * 100).toFixed(0) + '%',
                  style: {
                    textAlign: 'center',
                    fill: '#d3e2ff',
                    stroke: null
                  },
                  offsetY: -12,
                });
            });
          }}
          options={{
            data,
            scales: {
              value: {
                alias: '销售额(万)',
              },
              type: {
                tickLine: {
                  alignTick: false,
                },
              }
            },
            axes: {
              value: false,
            },
            tooltip: {
              showMarkers: false,
            },
            interaction: {
              type: 'element-active'
            },
            geometries: [{
              type: 'interval',
              position: 'type*value'
            }]
          }}
        />
      </DemoWrapper>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);
```