echarts图表增加外边框 或者外阴影 内边框或者内阴影
如果能给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};
目前的警告优化仅针对上述使用到的图表属性,其他配置变化暂未提及,需要根据使用情况进行修改。
更多推荐
已为社区贡献4条内容
所有评论(0)