Echarts绘制南丁格尔图

最新推荐文章于 2023-08-30 11:11:48 发布

云风xe

最新推荐文章于 2023-08-30 11:11:48 发布

阅读量915

点赞数

本文链接：https://blog.csdn.net/m0_52364694/article/details/120612072

版权

echarts

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 600px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div class="container"></div>
    <script>
        const container = document.querySelector('.container')
        var myEcharts = echarts.init(container)
        var options = {
            title: {
                text: '南丁格尔图',
                subtext: '测试'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: 'Radius Mode',
                    type: 'pie',
                    radius: [20, 140],//设置半径大小
                    center: ['25%', '50%'],
                    roseType: 'radius',
                    itemStyle: {
                        borderRadius: 15
                    },
                    label: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    data: [
                        { value: 40, name: 'rose 1' },
                        { value: 33, name: 'rose 2' },
                        { value: 28, name: 'rose 3' },
                        { value: 22, name: 'rose 4' },
                        { value: 20, name: 'rose 5' },
                        { value: 15, name: 'rose 6' },
                        { value: 12, name: 'rose 7' },
                        { value: 10, name: 'rose 8' }
                    ]
                },
            ]

        }
        myEcharts.setOption(options)
    </script>
</body>

</html>