12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- import * as echarts from 'echarts';
- import React, { useEffect, useRef } from 'react';
- interface editPros {
- data: any;
- }
- const Statistical: React.FC<editPros> = (props) => {
- const chartRef: any = useRef();
- const { data } = props;
- const options = {
- title: {
- left: 'center',
- },
- tooltip: {
- trigger: 'item',
- },
- legend: {
- orient: 'vertical',
- left: 'left',
- },
- series: [
- {
- type: 'pie',
- radius: '50%',
- data: [
- { value: data?.device_online * 6, name: '在线' },
- { value: data?.device_offline, name: '离线' },
- ],
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)',
- },
- },
- },
- ],
- };
- useEffect(() => {
- // 创建一个echarts实例,返回echarts实例。不能在单个容器中创建多个echarts实例
- const chart = echarts.init(chartRef.current);
- // 设置图表实例的配置项和数据
- chart.setOption(options);
- // 组件卸载
- return () => {
- chart.dispose();
- };
- }, []);
- return (
- <div>
- <div style={{ width: '600px', height: '400px' }} ref={chartRef} />
- </div>
- );
- };
- export default Statistical;
|