---
title: 仪表盘
order: 17
---

## 图表类-仪表盘 GaugeChart

````jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Chart, STYLE_PREFIX } from '@linkdesign/screen';

const { GaugeChart } = Chart;

const App = () => {
  return (
    <div data-theme="dark" className={`container ${STYLE_PREFIX}main-body`}>
      <div className="chart">
        <GaugeChart
          title="负荷指数"
          universalStyle={{
            width: 450,
            height: 230,
          }}
          config={{
            value: 5.4,
            limit: 6,
            min: 0,
            max: 8,
            tickInterval: 1,
            label: '良好',
          }}
        />
      </div>
    </div>
  );
}

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

````css
.container {
  position: relative;
  display: flex;
}

.chart {
  background-color: #1f3b6d;
  padding: 20px;
}
````
