---
title: 饼状标签占比图
order: 14
---

## 图表类-饼状标签占比图（饼图 由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`}>
      <EChart
        className="chart"
        title="饼状标签占比图"
        universalStyle={{
          width: 450,
          height: 230,
        }}
        options={{
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            icon: 'circle',
            orient: 'vertical',
            top: 'middle',
            left: 'right',
            align: 'left',
            itemWidth: 6,
            formatter: 'Legend {name}',
            textStyle: {
              fontFamily: 'HelveticaNeue-CondensedBold',
              color: '#D3E2FF',
              fontSize: 12,
            },
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['35%', '50%'],
              data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' },
              ],
            },
          ],
        }}
      />
    </div>
  );
}

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

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

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