umi和react中如何使用Echarts

1.首先是下载echarts和echarts-for-react

npm install  echarts
npm install  echarts-for-react
或
yarn add echarts
yarn add echarts-for-react

2.去官网中查找需要的图表Examples - Apache EChartshttps://echarts.apache.org/examples/zh/index.html#chart-type-pie

3.在项目中引入

import React from 'react'
import ReactEcharts from 'echarts-for-react';
export default function Pie() {
  let option = {
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 2, name: '报警' },
          { value: 156, name: '正常' },
          { value: 145, name: '离线' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactEcharts option={option} />
    </div>
  )
}

4.呈现效果