饼图添加内外层阴影

本文主要介绍如何给echarts图表增加内外阴影,代码如下:
series: [

                  {

                    name: '费用类型分布统计',

                    type: 'pie',

                    center:['50%','50%'],

                    radius: ['30%', '60%'],//真实数据的radius,这里的30%代表内圆,60%代表外圆,如果阴影中的radius设置为小于等于30%,代表为内阴影,大于60%代表为外阴影。

                    avoidLabelOverlap: true,//是否启用防止标签重叠策略

                    showEmptyCircle: true,//是否在无数据的时候显示一个占位圆

                    label: {

                      show:true,

                      formatter:'{d}%',

                      position: 'inside',

                    },

                    emphasis: { //聚焦时强调样式

                      label: {

                        show: true,

                        fontSize: '16',

                        fontWeight: 'bold'

                      },

                    },

                    labelLine: {

                      show: true

                    },

                    data: [],

                  },

                  //下方配置为echarts图表外边框配置详情,

                    {

                        name: '外边框',

                        type: 'pie',

                        tooltip: {

                            show: false,

                        },

                        clockWise: false, //顺时加载

                        hoverAnimation: false, //鼠标移入变大

                        center:['50%','50%'],//这里跟上面那组一样即可

                        radius: ['66%', '66%'],//这里根据自己的需要自行调整,但是两个值要一样大哦,如果小于上方设置的最小内圆30%则为内阴影,大于外圆60%则为外阴影

                        label: {

                            normal: {

                                show: false //重点:此处主要是为了不展示data中的value和name

                            }

                        },

                        data: [{

                            value: 1,//此处的值无所谓是多少

                            name: '',//因为不展示label,可不填

                            itemStyle: { //边框样式,此处我们设置的浅蓝色,颜色可自行修改

                                normal: {

                                    borderWidth: 20,//边框宽度

                                    borderColor: 'rgba(94, 183, 249,  0.13)'//边框颜色

                                }

                            }

                        }]

                    },

                ]

              },

上述代码中series数组第一个对象代表pie饼图数据展示,这里的radius,这里的30%代表内圆,60%代表外圆,此时如果在series数组的第二个对象即阴影对象中的radius设置为小于等于30%,代表为内阴影,大于60%代表为外阴影。

在大于echarts4.0的版本中上述配置优化

在一些高版本中的配置上述阴影,我们可以看到,会有很多warning提示,如下图所示

![在这里插入图片描述](https://img-blog.csdnimg.cn/2c706d62d60d4d5c8397e33974d4c60b.png#pic_center)

上述图片可以看到以下四点警告

1、label、itemStyle中的normal字段被移除了;

2、clockWise 顺时针字段由小驼峰命名法改为clockwise;

3、hoverAnimation已经被弃用了,阴影不能放大,此时需要使用 emphasis:{scale: 0};

目前的警告优化仅针对上述使用到的图表属性,其他配置变化暂未提及,需要根据使用情况进行修改。

效果如下图所示:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容