---
title: 环状堆叠占比图
order: 16
---

## 图表类-环状堆叠占比图（环状图 由EChart实现）

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

const { EChart } = Chart;

const App = () => {
  return (
    <div data-theme="dark" className={`container ${STYLE_PREFIX}main-body`}>
      <div className="chart">
        <EChart
          title="环状堆叠占比图"
          universalStyle={{
            width: 450,
            height: 160,
          }}
          options={{
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)',
            },
            legend: {
              icon: 'circle',
              orient: 'vertical',
              top: 'middle',
              left: 'right',
              align: 'left',
              itemWidth: 6,
              formatter: '{name}    40%',
              textStyle: {
                fontFamily: 'HelveticaNeue-CondensedBold',
                color: '#D3E2FF',
                fontSize: 12,
              },
            },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: [40, 48],
                center: [60, '50%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: true,
                    position: 'center',
                    formatter: 'lol',
                    textStyle: {
                      fontSize: 18,
                      fontFamily: 'HelveticaNeue-CondensedBold',
                      color: '#D3E2FF',
                    },
                  },
                  emphasis: {
                    show: true,
                    // formatter: '8000',
                    textStyle: {
                      fontSize: '20',
                      fontWeight: 'bold',
                    },
                  },
                },
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                data: [
                  { value: 335, name: '消防事件' },
                  { value: 310, name: '城市内涝事件' },
                  { value: 234, name: '环境污染事件' },
                  { value: 135, name: '城管事件' },
                  { value: 1548, name: '安防事件' },
                ],
              },
            ],
          }}
        />
      </div>
    </div>
  );
}

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

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

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