echarts图表增加外边框 或者外阴影 内边框或者内阴影

如果能给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};

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

  • 6
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

【拾光静好 微微一笑】

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值