echarts环形图demo

最新推荐文章于 2023-05-12 11:35:29 发布

希望能坚持写吧

最新推荐文章于 2023-05-12 11:35:29 发布

阅读量155

点赞数

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/YSys12345678/article/details/118611054

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

环形图demo

当作自己的工作中的素材，可以直接拿过来用的，在此做个备份

<!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">
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var chartData = {name: '装备制造', value: 54}
        colors = ['#389af4', '#dfeaff' ]
        
        option = {
            backgroundColor: "#fff",
            title: {
                text: chartData.name,
                // left: index * 20 + 10 + '%',
                left: '20%',
                top: '70%',
                textAlign: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: '16',
                    color: colors[0],
                    textAlign: 'center',
                },
            },
            series: {
                name: chartData.name,
                type: 'pie',
                clockWise: false,
                radius: [55, 70],
                itemStyle: {
                    normal: {
                        color: colors[0],
                        shadowColor: colors[0],
                        shadowBlur: 0,
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                    }
                },
                hoverAnimation: false,
                // center: [index * 20 + 10 + '%', '50%'],
                center: ['20%', '50%'],
                data: [{
                    value: chartData.value,
                    label: {
                        normal: {
                            formatter: function (params) {
                                return params.value + '%';
                            },
                            position: 'center',
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold',
                                color: colors[0]
                            }
                        }
                    },
                }, {
                    value: 100 - chartData.value,
                    name: 'invisible',
                    itemStyle: {
                        normal: {
                            color: colors[1]
                        },
                        emphasis: {
                            color: colors[1]
                        }
                    }
                }]
            }
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

效果展示

在这里插入图片描述

希望能坚持写吧

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
echarts环形图demo

环形图demo当作自己的工作中的素材，可以直接拿过来用的，在此做个备份<!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, initi
复制链接

扫一扫