ECharts-表盘

最新推荐文章于 2024-04-09 16:32:01 发布

在月亮上码字

最新推荐文章于 2024-04-09 16:32:01 发布

阅读量144

点赞数

本文链接：https://blog.csdn.net/qq_35689096/article/details/104084111

版权

ECharts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-self: center;
            background: blueviolet;
            width: 100vw;
            height: 100vh;
        }

        .container {
            background-color: #eee;
            width: 50vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="gauge" class="container"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('gauge'));
        var option = {
            title: {
                text: 'ECharts gauge'
            },
            tooltip: {},
            series: [{
                name: '利润',
                type: 'gauge',
                detail: {
                    formatter: '{value}%'
                },
                data: [{
                    value: 10,
                    name: '毛利润率'
                }]
            }],
        };

        myChart.setOption(option);
        // setInterval(function () {
        //     option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
        //     myChart.setOption(option, true);
        // }, 1000);
        setInterval(() => {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            // alert(option.series[0].data[0].value);
            myChart.setOption(option, true);
        }, 1000);
    </script>
</body>

</html>

在这里插入图片描述