React中使用Echarts可视化视图

 echarts官方：Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

1、在React项目中引入 echarts-for-react 模块

import ReactEcharts from 'echarts-for-react'

2、主要代码

export default function index() {
  let option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 1
        },
        data: [
          { value: 900, name: '现有客户' },
          { value: 735, name: '当地资讯' },
          { value: 0, name: '网络平台' },
          { value: 484, name: '展会' },
          { value: 0, name: '外出拜访' },
          { value: 200, name: '供应商' },
          { value: 1200, name: '市场挖掘' },
          { value: 0, name: '推广' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  return (
    <>
      <ReactEcharts option={option} style={{ height: '350px', width: '500px', backgroundColor: 'white', borderRadius: '5px' }}></ReactEcharts>
    </>
  )
}