index.tsx 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. import * as echarts from 'echarts';
  2. import React, { useEffect, useRef } from 'react';
  3. interface editPros {
  4. data: any;
  5. }
  6. const Statistical: React.FC<editPros> = (props) => {
  7. const chartRef: any = useRef();
  8. const { data } = props;
  9. const options = {
  10. title: {
  11. left: 'center',
  12. },
  13. tooltip: {
  14. trigger: 'item',
  15. },
  16. legend: {
  17. orient: 'vertical',
  18. left: 'left',
  19. },
  20. series: [
  21. {
  22. type: 'pie',
  23. radius: '50%',
  24. data: [
  25. { value: data?.device_online * 6, name: '在线' },
  26. { value: data?.device_offline, name: '离线' },
  27. ],
  28. emphasis: {
  29. itemStyle: {
  30. shadowBlur: 10,
  31. shadowOffsetX: 0,
  32. shadowColor: 'rgba(0, 0, 0, 0.5)',
  33. },
  34. },
  35. },
  36. ],
  37. };
  38. useEffect(() => {
  39. // 创建一个echarts实例,返回echarts实例。不能在单个容器中创建多个echarts实例
  40. const chart = echarts.init(chartRef.current);
  41. // 设置图表实例的配置项和数据
  42. chart.setOption(options);
  43. // 组件卸载
  44. return () => {
  45. chart.dispose();
  46. };
  47. }, []);
  48. return (
  49. <div>
  50. <div style={{ width: '600px', height: '400px' }} ref={chartRef} />
  51. </div>
  52. );
  53. };
  54. export default Statistical;