---
title: 环状占比统计图
order: 15
---

## 图表类-环状占比统计图（环状图） RingChart

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

const { RingChart } = Chart;

const text = (
  <span className={`${STYLE_PREFIX}data ${STYLE_PREFIX}main-indicator-data`}>7800</span>
);

const App = () => {
  return (
    <div data-theme="dark" className={`container ${STYLE_PREFIX}main-body`}>
      <RingChart
        className="chart"
        universalStyle={{ width: 230 }}
        title="处置率"
        rate={78}
      />

      <RingChart
        className="chart"
        universalStyle={{ width: 230 }}
        title="处置事件"
        rate={78}
        text={text}
      />
    </div>
  );
}

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

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

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