echarts之饼图---圆环饼图（1）

最新推荐文章于 2024-09-03 16:27:12 发布

爱学习的小兰同学

最新推荐文章于 2024-09-03 16:27:12 发布

阅读量524

点赞数

分类专栏： # echarts

本文链接：https://blog.csdn.net/pilgrim_121/article/details/118803822

版权

echarts 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用Echarts库创建一个圆环饼图，包括HTML结构、CSS样式设置和JavaScript逻辑。示例代码展示了如何初始化图表、设置饼图的样式、数据以及响应式布局。饼图数据包括搜索引擎、直接访问、邮件营销等五项，同时提供了自适应屏幕大小的功能。

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

PS相关学习资料链接：Pink老师的教程分解

效果：
在这里插入图片描述
1.html结构

<div class="pannel age">
   <h2>圆环饼图</h2>
   <div class="chart">
       图表
   </div>
</div>

2.css自行设置chart位置的宽和高
3.js逻辑：

//饼图：年龄分布
(function() {
    var myChart = echarts.init(document.querySelector(".age .chart"));
    var option = {
        color: [
            "#065aab",
            "#066eab",
            "#0682ab",
            "#0696ab",
            "#06a0ab",
        ],
        tooltip: {
            trigger: 'item', //类目触发，axis是坐标轴触发
            formatter: '{a}<br />{b}:{c}({d}%)'
                //a:年龄分布:series里的name
                //b:搜索引擎：series里的data的name
                //c:1048：series里的data的value
                //d:echarts自己将值换算的百分数
        },
        legend: {
            bottom: '0%',
            // 距离底部为0%
            bottom: "0%",
            // 小图标的宽度和高度
            itemWidth: 10,
            itemHeight: 10,
            textStyle: { //图例文字的样式
                color: 'rgba(255, 255, 255, 0.5)'
            }

        },
        series: [{
            name: '年龄分布',
            type: 'pie',
            // 设置饼形图在容器中的位置           
            center: ["50%", "50%"],
            //内圆半径和外圆半径
            radius: ['30%', '60%'],
            avoidLabelOverlap: false,
             不显示标签文字
            label: {
                show: false
            },
            // 不显示连接线(图形和文字之间的线)
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: '搜索引擎' },
                { value: 735, name: '直接访问' },
                { value: 580, name: '邮件营销' },
                { value: 484, name: '联盟广告' },
                { value: 300, name: '视频广告' }
            ]
        }]
    };
    myChart.setOption(option);

    //让图表跟随屏幕自适应
    window.addEventListener("resize", function() {
        myChart.resize();
    });
})();