echarts扇形图

最新推荐文章于 2024-07-05 15:59:12 发布

原创最新推荐文章于 2024-07-05 15:59:12 发布 · 6.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #pie

echarts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何利用echarts库来制作展示男女比例的扇形图。通过学习echarts API，作者完成了初步的图表实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts扇形图

根据男女比例制作一个扇形图
这里初步学习echarts，看了很久的api，把主要代码放在下面。

<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));
            option = {
                title : {
                   text: '办税人性别比例',//标题
                   x:'center'
               },



                // tooltip: {
                //     trigger: 'item',
                //     formatter: "{a} <br/>{b}: {c} ({d}%)"
                // },
                color:['#31b0d5','pink'],
                legend: {
                    // orient: 'vertical',
                    x: 'left',
                    y:'bottom',
                    data:['男','女']
                },
                series: [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius: '55%',
                        itemStyle : {
                            normal : {
                                label : {
                                    show : true,
                                    formatter: "{b}:  ({d}%)",//显示标签
                                },
                                labelLine : {
                                    show : true,//显示标签线
                                    // length:10
                                },

                                    borderWidth:2, //设置border的宽度有多大
                                    borderColor:'#fff',

                            },

                        },

                        data:[
                            {value:147, name:'男'},
                            {value:102, name:'女'}
                        ]
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);
        }
    );
</script>