echars 树形图

最新推荐文章于 2024-07-06 16:47:02 发布

在路上等

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量92

点赞数 3

分类专栏： echars 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_42327537/article/details/139739152

版权

echars 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const ThreeProgress = ({ deviceInfo }) => { // 此名称用来生成用例名称，可进行语义化命名
    const chartRef = useRef(null);

    const option = {
        // 标题
        title: {
            text: `设备总数 \n ${deviceInfo.totalNumberOfDevices || 0}`,
            left: '95px',
            top: '80px',
            textAlign: 'center',
            textStyle: {
                fontSize: 14
            }
        },
        // 提示信息
        tooltip: {
            trigger: 'item',
            position: 'inside',
            confine: true
        },
        // 图例
        legend: {
            orient: 'vertical',
            right: 0,
            top: 'center',
            icon: 'circle', 
        },
        grid: { left: '5', top: '15', right: '0', bottom: '15' },
        series: [
            {
                name: '设备信息',
                type: 'pie',
                radius: ['45%', '55%'], // 外半径和内半径
                center: ['100px', '50%'],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: deviceInfo.cloudDevices || 0, name: `已上云设备 \u0020 \u0020 \u0020 \u0020  ${deviceInfo.cloudDevices || 0}（${deviceInfo.totalNumberOfDevices ? ((parseInt(deviceInfo.cloudDevices)/parseInt(deviceInfo.totalNumberOfDevices))*100).toFixed(1): '0.0'}%）` },
                    { value: deviceInfo.notCloudDevices || 0, name: `未上云设备 \u0020 \u0020 \u0020 \u0020  ${deviceInfo.notCloudDevices || 0}（${deviceInfo.totalNumberOfDevices ? ((parseInt(deviceInfo.notCloudDevices)/parseInt(deviceInfo.totalNumberOfDevices))*100).toFixed(1) : '0.0'}%）` }
                ]
            },
            {
                name: '设备信息',
                type: 'pie',
                radius: ['65%', '75%'], // 外半径和内半径
                center: ['100px', '50%'],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: deviceInfo.intoManagement || 0, name: `已纳入4A管理 \u0020 \u0020  ${deviceInfo.intoManagement || 0}（${deviceInfo.totalNumberOfDevices ? ((parseInt(deviceInfo.intoManagement)/parseInt(deviceInfo.totalNumberOfDevices))*100).toFixed(1) : '0.0'}%）` },
                    { value: deviceInfo.notIntoManagement || 0, name: `未纳入4A管理 \u0020 \u0020  ${deviceInfo.notIntoManagement || 0}（${deviceInfo.totalNumberOfDevices ? ((parseInt(deviceInfo.notIntoManagement)/parseInt(deviceInfo.totalNumberOfDevices))*100).toFixed(1) : '0.0'}%）` }
                ]
            },
            {
                name: '设备信息',
                type: 'pie',
                radius: ['85%', '95%'], // 外半径和内半径
                center: ['100px', '50%'],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: deviceInfo.devicesMonitored || 0, name: `已监控设备 \u0020 \u0020 \u0020 \u0020  ${deviceInfo.devicesMonitored || 0}（${deviceInfo.totalNumberOfDevices ? ((parseInt(deviceInfo.devicesMonitored)/parseInt(deviceInfo.totalNumberOfDevices))*100).toFixed(1) : '0.0'}%）` },
                    { value: deviceInfo.notDevicesMonitored || 0, name: `未监控设备 \u0020 \u0020 \u0020 \u0020  ${deviceInfo.notDevicesMonitored || 0}（${deviceInfo.totalNumberOfDevices ? ((parseInt(deviceInfo.notDevicesMonitored)/parseInt(deviceInfo.totalNumberOfDevices))*100).toFixed(1) : '0.0'}%）` }
                ]
            }
        ]
    };
    useEffect(() => {
        const chart = echarts.init(chartRef.current);
        chart.setOption(option);
        return () => {
            chart.dispose(); // 清理chart实例
        };
    }, [deviceInfo]);

    return (
        <div ref={chartRef} style={{ width: '410px', height: '192px'}}>

        </div>

    );
};

export default ThreeProgress;