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}；

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

echarts图表增加外边框或者外阴影内边框或者内阴影相关推荐

html中div怎么加内边框,css怎么加内边框？
css怎么加内边框?下面本篇文章就来给大家介绍一下使用css加内边框的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以使用border属性配合box-sizin ...
html5加内边框,css3怎么加内边框
css3加内边框的方法:可以通过使用border属性和box-sizing属性来加内边框,如[box-sizing:border-box;].box-sizing属性允许以某种方式定义某些属性,以适应 ...
【帆软FR】Echarts图表方案
目录一.导图二.准备工作三.通用方法介绍 1.方案1-Label标签 2.方案2-报表块 3.方案3-网页框 4.方案4-Echarts插件四.Echarts联动方案五.附件一.导图二. ...
html中表格内边框颜色,html表格边框颜色 Word中的表格如何设置表格内边框的颜色...
html 表格上下左右边框颜色各不同,怎么设置? html是一种网页代码,即在网页中显示的格式,当需要表格左右显示不同的颜色时,可以分开设置,如:border-top:1px solid red;bo ...
给地图的外边框加阴影(给地图的外边框设置与内边框不同的颜色)
1.先看效果图 2.说一下整体的思路因为地图暂无内外边框分开设置边框的属性,所以我们可以利用地理极坐标组件,采用--双层地图-覆盖--思想,底层的地图设置自己需要的边框颜色和加阴影与否,顶层的地图设 ...
echarts水波球特效（附带外边框进度条）
echarts水波球特效(附带外边框进度条) 1.话不多说先上效果图 2.这里用到了echarts的liquidFill图表,需要加载liquidFill插件 npm i echarts-liquid ...
在echarts图表外调用echarts的下载功能以及echarts getDataURL图表数据不显示的问题的解决方案...
问题描述: echarts图表的toolbox里面本身有下载的功能,但有的时候,我们需要在echarts图表外添加一个按钮来实现下载,以下是基于vue,echarts版本4的一个解决方案记录: 解决方 ...
外链增加方法，与外链评估
外链的增加方法-友情链接友情链接注意事项: 使用锚文本留意假PR值判断nofollow 避免导出链接过多 PR劫持是通过欺骗手段获得比较高的PR值显示.方法是利用跳转,一般搜索引擎在处理301和 ...
Excel中设置内边框和外边框
1.新建一个Excel工作表,命名为"数据.xls" 2.选择需要设置内边框的表格,鼠标右键单击"设置单元格格式" 3.选择"边框中的内部" ...

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

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

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

echarts图表增加外边框或者外阴影内边框或者内阴影相关推荐

最新文章

热门文章

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

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

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

echarts图表增加外边框 或者外阴影 内边框或者内阴影相关推荐

最新文章

热门文章

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

echarts图表增加外边框或者外阴影内边框或者内阴影相关推荐