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

## 基础用法

```jsx
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { reduce } from 'lodash-es';
import { Switch, Grid, Divider } from '@alifd/next';
import {
  Title,
  Indicator,
  CarouselTable,
  EChart,
  BarStackChart,
  RingStackChart,
  GaugeChart,
  MiniLineChart,
  BarChart,
  LineChart,
  DemoWrapper,
  config,
  Scene,
  Utils,
} from '@linkdesign/screen';

const { Row, Col } = Grid;
const { CarPlate } = Scene.Park;
const { _cssPrefix } = config;
const { NWC } = Utils;

const R1C3 = [
  {
    actionTime: 1587696039000,
    actionType: 1,
    carNo: '鲁CH873D',
    carType: 1,
    inTime: 1587696039000,
    parkDuration: -31,
    parkId: 382,
    parkName: '六和金座停车场',
    recordId: '12020042410400426385400382',
    money: 5000,
  },
  {
    actionTime: 1587695976000,
    actionType: 1,
    carNo: '浙AEJ092',
    carType: 1,
    inTime: 1587695976000,
    parkDuration: 31,
    parkId: 260,
    parkName: '中大银座停车场',
    recordId: '12020042410393663629050260',
    money: 4000,
  },
  {
    actionTime: 1587695975000,
    actionType: 2,
    carNo: '浙AGF033',
    carType: 1,
    inTime: 1587694344000,
    outTime: 1587695975000,
    parkDuration: 1631,
    parkId: 260,
    parkName: '中大银座停车场',
    recordId: '12020042410122501693870260',
    money: 3000,
  },
  {
    actionTime: 1587695973000,
    actionType: 1,
    carNo: '浙A2PT66',
    carType: 1,
    inTime: 1587695973000,
    parkDuration: 34,
    parkId: 261,
    parkName: '鹏辉产业园停车场',
    recordId: '12020042410393402013680261',
    money: 2000,
  },
  {
    actionTime: 1587695971000,
    actionType: 2,
    carNo: '浙AJ885N',
    carType: 1,
    inTime: 1587693297000,
    outTime: 1587695971000,
    parkDuration: 2674,
    parkId: 362,
    parkName: '澹海金座停车场',
    recordId: '12020042409545781394750362',
    money: 1000,
  },
  {
    actionTime: 1587695961000,
    actionType: 1,
    carNo: '浙FS1G12',
    carType: 1,
    inTime: 1587695961000,
    parkDuration: 46,
    parkId: 358,
    parkName: '龙轩停车场',
    recordId: '12020042410392148052130358',
    money: 1000,
  },
  {
    actionTime: 1587695958000,
    actionType: 2,
    carNo: '浙ADC9223',
    carType: 5,
    inTime: 1587694482000,
    outTime: 1587695958000,
    parkDuration: 1476,
    parkId: 367,
    parkName: '之江发展大厦停车场',
    recordId: '12020042410144185394290367',
    money: 1000,
  },
  {
    actionTime: 1587695933000,
    actionType: 1,
    carNo: '浙ABV586',
    carType: 1,
    inTime: 1587695933000,
    parkDuration: 74,
    parkId: 260,
    parkName: '中大银座停车场',
    recordId: '12020042410385380139350260',
    money: 1000,
  },
  {
    actionTime: 1587695914000,
    actionType: 1,
    carNo: '浙A92008',
    carType: 1,
    inTime: 1587695914000,
    parkDuration: 93,
    parkId: 367,
    parkName: '之江发展大厦停车场',
    recordId: '12020042410383472221730367',
    money: 1000,
  },
  {
    actionTime: 1587695910000,
    actionType: 1,
    carNo: '浙A8011E',
    carType: 1,
    inTime: 1587695910000,
    parkDuration: 97,
    parkId: 261,
    parkName: '鹏辉产业园停车场',
    recordId: '12020042410383014770170261',
    money: 1000,
  },
];

const App = () => {
  const [r0c1, setR0c1] = useState();
  const [r1c3, setR1c3] = useState();

  useEffect(() => {
    fetchR0c1();
    fetchR1c3();
  }, []);

  const fetchR0c1 = () => {
    setTimeout(() => {
      const res = [
        { value: 335, name: '消防事件' },
        { value: 310, name: '城市内涝' },
        { value: 234, name: '环境污染' },
        { value: 135, name: '城管事件' },
        { value: 1548, name: '安防事件' },
      ];

      const total = reduce(res, (sum, el) => sum + el.value, 0);

      setR0c1(res.map(({ value, name }) => ({
        value,
        name: `${name}    ${(value / total * 100).toFixed(2)}%`
      })));
    }, 1000);
  };

  const fetchR1c3 = () => {
    setTimeout(() => {
      const total = reduce(R1C3, (sum, el) => sum + el.money, 0);

      setR1c3(R1C3.map(({ money, parkName }, i) => ({
        label: `${i + 1}. ${parkName}`,
        value: money,
        rate: money / total * 100,
      })));
    }, 1000);
  };

  return (
    <DemoWrapper id="demo-Scene-Park">
      <section style={{ marginBottom: 20 }}>
        <Title className={`${_cssPrefix}main-title`} textStyle={{ marginBottom: 12 }}>清家底</Title>
        
        <div>
          <Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>接入停车场数</Title>

          <Row justify="space-between">
            <Col span="10" align="center">
              <BarStackChart
                title="接入停车场"
                dataSource={[{
                  label: '类型一',
                  value: 40,
                }, {
                  label: '类型二',
                  value: 60,
                }]}
              />
            </Col>
            <Col span="10">
              <RingStackChart title="接入停车场" dataSource={r0c1} />
            </Col>
          </Row>
        </div>

        <Divider />

        <div>
          <Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>接入调度停车场数</Title>

          <Row justify="space-between">
            <Col span="10" align="center">
              <BarStackChart
                title="接入调度停车场数"
                total={140}
                dataSource={[{
                  label: '类型一',
                  value: '40%',
                }, {
                  label: '类型二',
                  value: '100%',
                }]}
              />
            </Col>
            <Col span="10">
              <RingStackChart title="接入调度停车场数" dataSource={r0c1} />
            </Col>
          </Row>
        </div>

        <Divider />

        <div>
          <Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>接入普查停车场数</Title>

          <Row justify="space-between">
            <Col span="10" align="center">
              <BarStackChart
                title="接入普查停车场数"
                total={140}
                dataSource={[{
                  label: '类型一',
                  value: '40%',
                }, {
                  label: '类型二',
                  value: '100%',
                }]}
              />
            </Col>
            <Col span="10">
              <RingStackChart title="接入普查停车场数" dataSource={r0c1} />
            </Col>
          </Row>
        </div>
      </section>

      <section style={{ marginBottom: 20 }}>
        <Title className={`${_cssPrefix}main-title`} textStyle={{ marginBottom: 12 }}>实时停车资源情况数据指标</Title>
        
        <div>
          <Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>实时停车数</Title>

          <Row>
            <Col span="5" align="center">
              <Indicator
                type="main"
                label="在停车位总数"
                value={123456}
              />
            </Col>

            <Col span="5" offset="2" align="center">
              <Indicator
                type="main"
                label="空闲车位数"
                value={11456}
              />
            </Col>

            <Col span="10" offset="2">
              <BarStackChart
                title="在停车位总数"
                dataSource={[{
                  label: '类型一',
                  value: 400,
                }, {
                  label: '类型二',
                  value: 600,
                }]}
              />
            </Col>
          </Row>
        </div>

        <Divider />

        <div>
          <Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>负荷指数</Title>

          <Row justify="space-between">
            <Col span="10" align="center">
              <GaugeChart
                universalStyle={{ height: 240 }}
                config={{
                  value: 5.4,
                  limit: 6,
                  max: 8,
                  label: '良好',
                  content: (val) => val.toFixed(1),
                }}
              />
            </Col>
            <Col span="10">
              <GaugeChart
                universalStyle={{ height: 240 }}
                config={{
                  value: 7,
                  limit: 6,
                  max: 8,
                  label: '超负荷',
                  content: (val) => val.toFixed(1),
                }}
              />
            </Col>
          </Row>
        </div>

        <Divider />

        <div>
          <Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>余位识别准确率</Title>

          <Row>
            <Col span="2" align="center">
              <Indicator
                type="main"
                label="余位准确率"
                value="85%"
                unit={<span className={`with-triangle ${_cssPrefix}data`}>12%</span>}
              />
            </Col>
            <Col span="3" offset="1" align="center">
              <MiniLineChart
                universalStyle={{ height: 56 }}
                dataSource={[820, 932, 901, 934, 1290, 1330, 1320]}
              />
            </Col>
          </Row>
        </div>

        <Divider />

        <div>
          <Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>驶入驶出情况</Title>

          <Row>
            <Col span="12">
              <CarouselTable
                title="停车场车辆实时进出情况"
                global={{
                  textStyle: { color: '#fff' }
                }}
                universalStyle={{ height: 280 }}
                sliderOptions={{ slidesToShow: 5 }}
                headerOptions={{
                  textStyle: {
                    borderTop: '1px solid #D3E2FF',
                    borderBottom: '1px solid #D3E2FF',
                  },
                }}
                rowOptions={{
                  oddBackgroundColor: '#112854',
                }}
                column={[{
                  key: 'actionTime',
                  alias: '时间',
                  widthRate: 20,
                  type: 'time',
                  textStyle: {
                    paddingLeft: 10,
                  },
                }, {
                  key: 'parkName',
                  alias: '车场',
                  widthRate: 40,
                }, {
                  key: 'carNo',
                  alias: '车牌',
                  widthRate: 20,
                  cell: (val, i, record) => (val ? <CarPlate plateNo={val} plateColor={1} /> : '-'),
                }, {
                  key: 'money',
                  alias: '金额',
                  widthRate: 20,
                  type: 'data',
                }]}
                dataSource={R1C3}
              />
            </Col>
          </Row>
        </div>

        <Divider />

        <div>
          <Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>停车热点排行</Title>

          <Row>
            <Col span="12">
              <CarouselTable
                title="停车热点排行"
                universalStyle={{ height: 280 }}
                sliderOptions={{ slidesToShow: 5 }}
                column={[{
                  key: '$index',
                  widthRate: 10,
                }, {
                  key: 'parkName',
                  alias: '停车场/路侧停车名称',
                  widthRate: 70,
                }, {
                  key: 'money',
                  alias: '负荷指数',
                  widthRate: 20,
                  type: 'data',
                }]}
                dataSource={R1C3}
              />
            </Col>
          </Row>
        </div>

        <Divider />

        <div>
          <Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>停车场饱和度排名</Title>

          <Row>
            <Col span="12">
              <BarChart
                title="停车场饱和度排名"
                universalStyle={{ height: 280 }}
                dataSource={r1c3}
              />
            </Col>
          </Row>
        </div>

        <Divider />

        <div>
          <Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>停车场泊车活跃排名</Title>

          <Row>
            <Col span="12">
              <BarChart
                title="停车场泊车活跃度排名"
                universalStyle={{ height: 280 }}
                dataSource={r1c3}
              />
            </Col>
          </Row>
        </div>

        <Divider />

        <div>
          <Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>全域车位利用率</Title>

          <Row>
            <Col span="12">
              <LineChart
                title="全域车位利用率"
                universalStyle={{
                  height: 220,
                }}
                options={{
                  tooltip: {
                    formatter: '时间: {b}<br />利用率: {c}%',
                  },
                  xAxis: {
                    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)'
                        }],
                      }
                    },
                  }],
                }}
              />
            </Col>
          </Row>
        </div>

        <Divider />

        <div>
          <Title className={`${_cssPrefix}sub-title`} textStyle={{ marginBottom: 12 }}>停车难度预测（时间维度）</Title>

          <Row>
            <Col span="12">
              <LineChart
                title="停车难度预测（时间维度）"
                universalStyle={{
                  height: 220,
                }}
                options={{
                  tooltip: {
                    // formatter: '时间: {b}<br />利用率: {c}%',
                  },
                  xAxis: {
                    data: ['12:00', '15:00', '18:00', '21:00', '24:00'],
                  },
                  yAxis: {
                    name: '单位：%',
                    scale: true,
                  },
                  series: [{
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 6,
                    data: [20, 32, 10, null, null],
                    markLine: {
                      data: [{
                        xAxis: '18:00',
                        label: {
                          formatter: '现在',
                          position: 'start'
                        },
                        lineStyle: {
                          type: 'solid',
                          color: 'rgba(211, 226, 255, 0.5)',
                        }
                      }],
                    },
                  }, {
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 6,
                    data: [null, null, 20, 44, 80],
                    lineStyle: {
                      type: 'dashed',
                    }
                  }],
                }}
              />
            </Col>
          </Row>
        </div>
      </section>
    </DemoWrapper>
  );
}

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