echarts 饼状图(环形图) 笔记

本文介绍了如何在项目中使用Echarts创建饼状图,包括引用JS文件、编写后台接口、配置图表选项,以及在JS中初始化和设置图表。特别提到了如何避免标签遮挡,自定义显示百分比,并提供了主题修改和效果展示。

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

最近项目中用到图表展示,由于项目中之前已经用到echarts,于是就在echarts中找了一个跟UI界面比较像的拿来使用。

直接上代码说项目吧。

1、先引用相关js文件,可以在script脚本中直接引用。

2、然后写相关后台接口方法,拼接成所需数据结构可供直接返回使用。

3、在JS中调用,参考实例的方法进行修改。

var initPieData = function (xAxisData, data) {
            var myChart = echarts.init(document.getElementById('main'), 'macarons');
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}: {c} ({d}%)"
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    //data: xAxisData //由于节点较多的时候 会出现遮挡现象 故暂时屏蔽
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center',

                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '25',
                                    fontWeight: 'bold'
                                },
                                formatter:'{d}%'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: data
                    }
                ]
            };
            myChart.setOption(option);
        }

4、注意事项。

1)、关于主题的修改,可在官网下载你想要的主题JS,并在调用的时候引用并传参即可(如下所示)。

      主题下载地址:http://echarts.baidu.com/download-theme.html

       

2)、默认在圆环中间展示的节点项,但是我想要展示的是百分比,所以就修改展示内容即可(红框中所示)。

好了 ,以上总结完毕,展示最终效果图。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值