效果

基础环形饼图.jpg

代码

  1. import React, { useRef, useEffect } from 'react';
  2. const echarts = require('echarts');
  4. const TableList: React.FC<{}> = () => {
  5.   const chart: any = useRef(null);
  7.   useEffect(() => {
  8.     const myChart = echarts.init(chart.current);
  9.     const data = [
  10.       {
  11.         name: '数据1',
  12.         value: 36,
  13.       },
  14.       {
  15.         name: '数据2',
  16.         value: 20,
  17.       },
  18.       {
  19.         name: '数据3',
  20.         value: 16,
  21.       },
  22.       {
  23.         name: '数据4',
  24.         value: 10,
  25.       },
  26.       {
  27.         name: '数据5',
  28.         value: 9,
  29.       },
  30.     ];
  31.     const option = {
  32.       tooltip: {
  33.         trigger: 'item',
  34.       },
  35.       legend: {
  36.         // selectedMode: false, // 取消图例上的点击事件
  37.         icon: 'circle',
  38.         left: '50%',
  39.         top: '30%',
  40.         textStyle: {
  41.           // color: '#000',
  42.           rich: {
  43.             value: {
  44.               align: 'left',
  45.               width: 50,
  46.             },
  47.             name: {
  48.               align: 'left',
  49.               width: 50,
  50.               color: '#25b864',
  51.             },
  52.             count: {
  53.               align: 'left',
  54.               width: 50,
  55.               color: '#1890ff',
  56.             },
  57.           },
  58.         },
  59.         // data: data.map((item) => item.value),
  60.         // formatter: (name: string) => {
  61.         //   console.log(name, 'test name');
  62.         // },
  63.         formatter: (name: string) => {
  64.           const { value } = data.find((item) => item.name === name) || {};
  65.           return `{name| ${name}}{value| ${value}%}{count| ￥4544}`;
  66.         },
  67.       },
  68.       series: [
  69.         {
  70.           // name: '数量',
  71.           type: 'pie',
  72.           radius: ['40%', '55%'],
  73.           center: ['25%', '50%'],
  74.           data,
  75.           label: {
  76.             normal: {
  77.               show: false,
  78.               position: 'center',
  79.               formatter: '{text|{c}}\n{b}',
  80.               rich: {
  81.                 text: {
  82.                   fontSize: 30,
  83.                 },
  84.                 value: {
  85.                   fontSize: 20,
  86.                 },
  87.               },
  88.             },
  89.             emphasis: {
  90.               show: true,
  91.               // textStyle: {
  92.               //   fontSize: '12',
  93.               // },
  94.             },
  95.           },
  96.         },
  97.       ],
  98.     };
  99.     myChart.setOption(option);
  100.   }, []);
  102.   return (
  103.     <div>
  104.       test
  105.       <div style={{ width: 600, height: 400 }} ref={chart} />
  106.     </div>
  107.   );
  108. };
  109. export default TableList;