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

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

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

## 基础用法

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

const { _cssPrefix } = config;

class App extends Component {
  render() {
    return (
      <DemoWrapper id="demo-Chart">
        <LineChart
          title="全域车位利用率"
          loading
          universalStyle={{
            height: 220,
          }}
          options={{
            tooltip: {
              formatter: '时间: {b}<br />利用率: {c}%',
            },
            xAxis: {
              boundaryGap: true,
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
            yAxis: {
              name: '单位：%',
              min: 0,
              max: 100,
            },
            series: [{
              // data: [20, 32, 10, 34, 90, 30, 20],
              lineStyle: {
                color: '#3B81FF',
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(0, 112, 204, 0.5)'
                  }, {
                    offset: 1, color: 'rgba(0, 112, 204, 0)'
                  }],
                }
              },
            }],
          }}
        />
      </DemoWrapper>
    );
  }
}

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