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

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

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

## 基础用法

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import { Other, Indicator, Query, DemoWrapper } from '@linkdesign/screen';

const query = {
  service: (vars) => axios({
    method: 'POST',
    url: '//101.132.153.153/park/data/common/query',
    data: vars,
  }),
  variables: {
    "path": "/park/changde/statistics",
    "pageSize": 5,
    "pageNum": 1,
    "params": [{
      "fieldName": "county",
      "operator": "=",
      "value": null,
    }],
  },
};
const filter = () => {
  return [{
    label: '停车1',
    value: 1,
    unit: '个',
  }, {
    label: '停车2',
    value: 2,
    unit: '万',
  }, {
    label: '停车3',
    value: 3,
    unit: '%',
  }];

  // return get(data, 'data.data.items.[0]', []);
};


class App extends Component {
  render() {
    return (
      <DemoWrapper>
          <Query
            component="div"
            className="card card1"
            query={query.service}
            variables={query.variables}
            filters={[filter]}
          >
            <Indicator />
            <Indicator />
            <Indicator />
          </Query>
      </DemoWrapper>
    );
  }
}

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