eacharts 嵌套饼圆

最新推荐文章于 2022-10-21 16:50:04 发布

我是我家小女孩

最新推荐文章于 2022-10-21 16:50:04 发布

阅读量546

点赞数

我是我家小女孩@khuntoria

本文链接：https://blog.csdn.net/SQY_candy/article/details/82633924

版权

本文将详细介绍如何使用ECharts库创建嵌套饼图，包括设置数据、配置项和实现交互效果，帮助你更好地展示层次数据。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../js/echarts.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        option = {
            tooltip: {
                show: true,
                formatter: "{a} <br />{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
            },
            toolbox: {
                show: true,
               
            },
            calculable: true,
            series: [{
                // 小圆  
                    name: '访问来源',
                    type: 'pie',
                    center: ['50%',200],  //位置
                    radius: 80,
                    itemStyle: {
                        normal: {
                            label: {
                                position: 'inner',
                                formatter: function (params) {
                                    return (params.percent - 0).toFixed(0) + '%'
                                }
                            },
                            labelLine: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                formatter: "{b}\n{d}%"
                            }
                        }

                    },
                    // 中间部分
                    data: [{
                            value: 335,
                            name: '直达'
                        },
                        {
                            value: 679,
                            name: '营销广告'
                        },
                        {
                            value: 1548,
                            name: '搜索引擎'
                        }
                    ]
                },
                {
                    // 大圆
                    name: '访问来源',
                    type: 'pie',
                    center: ['50%', 200],
                    radius: [110, 140],
                    data: [{
                            value: 335,
                            name: '直达'
                        },
                        {
                            value: 310,
                            name: '邮件营销'
                        },
                        {
                            value: 234,
                            name: '联盟广告'
                        },
                        {
                            value: 135,
                            name: '视频广告'
                        },
                        {
                            value: 1048,
                            name: '百度',
                            itemStyle: {
                                normal: {
                                    color: (function () {
                                        // var zrColor = require('zrender/tool/color');
                                        // return zrColor.getRadialGradient(
                                        // 300, 200, 110, 300, 200, 140,
                                        // [[0, 'rgba(255,255,0,1)'],[1, 'rgba(30,144,250,1)']]
                                        // )
                                    })(),
                                    label: {
                                        textStyle: {
                                            color: 'rgba(30,144,255,0.8)',
                                            align: 'center',
                                            baseline: 'middle',
                                            fontFamily: '微软雅黑',
                                            fontSize: 30,
                                            fontWeight: 'bolder'
                                        }
                                    },
                                    labelLine: {
                                        length: 40,
                                        lineStyle: {
                                            color: '#f0f',
                                            width: 3,
                                            type: 'dotted'
                                        }
                                    }
                                }
                            }
                        },
                        {
                            value: 251,
                            name: '谷歌'
                        },
                        {
                            value: 102,
                            name: '必应',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: true
                                    },
                                    labelLine: {
                                        show: true,
                                        length: 50
                                    }
                                }
                            }
                        },
                        {
                            value: 147,
                            name: '其他'
                        }
                    ]
                },
            
            
            ]
       
       
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>