ECharts_饼图

3.5 饼图

3.5.1 实现步骤

  • ECharts最基本的代码结构

    • 引入js文件

    • DOM容器

    • 初始化对象

    • 设置option

  • 数据准备

  • 图标类型

    在 series 设置 type:'pie'

复制代码
<!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="lib/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px; height: 400px;"></div>

    <script>
        var mCharts = echarts.init(document.querySelector('div'));
        var pieData = [
            {
                name: '淘宝',
                value: 11231
            },
            {
                name: '京东',
                value: 22367
            },
            {
                name: '唯品会',
                value: 6147
            },
            {
                name: '1号店',
                value: 8989
            },
            {
                name: '聚美优品',
                value: 6000
            },
        ]
        var option = {
            series: {
                type: 'pie',
                data: pieData
            }
        }

        mCharts.setOption(option);
    </script>
</body>
</html>
复制代码

 

3.5.2 常见效果

  • 显示数值

    label.formatter

  • 圆环

    radius: 20

    饼图的半径

    radius: '20%'

    百分比参照的是高度和宽度中较小的那一部分的一半

    radius: [50%, '75%']''

    第0个元素的是内院的半径，第1个元素表示的是外圆的半径

 

复制代码
<!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="lib/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px; height: 400px;"></div>

    <script>
        var mCharts = echarts.init(document.querySelector('div'));
        var pieData = [
            {
                name: '淘宝',
                value: 11231
            },
            {
                name: '京东',
                value: 22367
            },
            {
                name: '唯品会',
                value: 6147
            },
            {
                name: '1号店',
                value: 8989
            },
            {
                name: '聚美优品',
                value: 6000
            },
        ]
        var option = {
            series: {
                type: 'pie',
                data: pieData,
                label: {
                    show: true,
                    formatter: function(arg) {
                        //console.log(arg);
                        return arg.name+' '+arg.value+'元\n'+arg.percent
                    }
                },
                radius: ['50%', '75%']
            }
        }

        mCharts.setOption(option);
    </script>
</body>
</html>
复制代码

 

  • 南丁格尔图
roseType: 'radius'

　　　　饼图的每一个区域的半径是不同的

 

  • 选中效果　
selectedMode: 'single'

　　将选中的区域偏离原点一小点距离

 

selectedMode: 'multiple'

　　设置多块选中区域具有选中效果

selectedOffSet: 30

　　偏移的距离

 

复制代码
<!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="lib/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px; height: 400px;"></div>

    <script>
        var mCharts = echarts.init(document.querySelector('div'));
        var pieData = [
            {
                name: '淘宝',
                value: 11231
            },
            {
                name: '京东',
                value: 22367
            },
            {
                name: '唯品会',
                value: 6147
            },
            {
                name: '1号店',
                value: 8989
            },
            {
                name: '聚美优品',
                value: 6000
            },
        ]
        var option = {
            series: {
                type: 'pie',
                data: pieData,
                label: {
                    show: true,
                    formatter: function(arg) {
                        //console.log(arg);
                        return arg.name+' '+arg.value+'元\n'+arg.percent
                    }
                },
                roseType: 'radius',
                selectedMode: 'single',
                selectedOffSet: 50
            }
        }

        mCharts.setOption(option);
    </script>
</body>
</html>
复制代码

 

posted @   Gazikel  阅读(306)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae