1. 安装echarts

    1
    npm install echarts --save

  2. 在react组件文件中引入相关依赖

    1
    2
    3
    import echarts from 'echarts/lib/echarts'
    import 'echarts/lib/chart/pie'
    import 'echarts/lib/component/graphic'

  3. 配置饼图数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    const option = {
      "graphic": [{ // 设置圆环内的文本内容
        "type": "text",
        "left": "center",
        "top": "40%", // 文字位置
        "style": {
          "text": "总人数",
          "fill": "#666",
          "textAlign": "center",
          "fontSize": 16
        }
      }, {
        "type": "text",
        "left": "center",
        "top": "50%",
        "style": {
          "text": "100个",
          "fill": "#1b1d1e",
          "fontSize": 24
        }
      }],
      "series": [{ // 环，这里可以是对象，也可以是数组，只有一项时可用对象；多项时，多个环
        "type": "pie",
        "radius": ["50%", "54%"], // 环的粗细
        "itemStyle": {
          "shadowBlur": 10,
          "shadowOffsetX": 0,
          "shadowOffsetY": 4
        },
        "rich": { // 富文本样式
          "name": {
            "color": "#666c70"
          },
          "value": {
            "color": "#1b1d1e"
          }
        },
        "label": { // 统一设置环的标签样式
          "textStyle": {
            "fontSize": 14,
            "lineHeight": 22
          }
        },
        "labelLine": { // 统一设置环的线样式
          "lineStyle": {
            "color": "#e0e6ec"
          },
          "length2": 40
        },
        "data": [{ // 具体的数据项，可针对不同的数据项设置不同的样式
          "name": "男生",
          "value": 60,
          "label": { // 对数据项设置标签样式
            "show": true,
            "rich": { // 数据项的富文本，在下面的formatter里使用了
              "name": {
                "color": "#666c70",
                "fontSize": 14
              },
              "value": {
                "color": "#1b1d1e",
                "fontSize": 14
              }
            },
            // {a}指series.name {b}指series.data的name
            // {c}指series.data的value {d}%指这一部分占总数的百分比
            "formatter": "{name|{b}}\n{value|{d}% {c}}"
          },
          "labelLine": {// 对数据项设置线的样式
            "show": true
          },
          "itemStyle": {// 对数据项设置颜色、阴影等
            "color": "#8d81ff",
            "shadowColor": "#8d81ff"
          }
        }, {
          "name": "女生",
          "value": 40,
          "label": {
            "show": true,
            "rich": {
              "name": {
                "color": "#666c70",
                "fontSize": 14
              },
              "value": {
                "color": "#1b1d1e",
                "fontSize": 14
              }
            },
            "formatter": "{name|{b}}\n{value|{d}% {c}}"
          },
          "labelLine": {
            "show": true
          },
          "itemStyle": {
            "color": "#ff7045",
            "shadowColor": "#ff7045"
          }
        }]
      }]
    }

  4. 画布元素

    1
    <div id="pie" style={{ width: '100%', height: 300 }}></div>

  5. 初始化图表

    1
    2
    3
    const pieDom = document.getElementById('pie')
    const pie = echarts.init(option)
    pie.setOption(option)