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

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

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

## 基础用法

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { DemoWrapper, EChart, config } from '@linkdesign/screen';

const { _cssPrefix } = config;

class App extends Component {
  render() {
    return (
      <DemoWrapper id="demo-Chart">
        <EChart
          className="pie-chart"
          title="饼状标签占比图"
          universalStyle={{
            width: 450,
            height: 240,
          }}
          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',
                textBorderColor: '#fff',
                textBorderWidth: 2,
                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: '搜索引擎' }
                ],
              }
            ]
          }}
        />
      </DemoWrapper>
    );
  }
}

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