0


eChars横向柱状图配置背景色配置信息

公司的原型图如下:
在这里插入图片描述

这里需要实现横向柱状图的背景阴影圆角,查了之后才知道柱状图背景属性,记录一下

实现方案

下面展示option的

代码片

const option ={// backgroundColor: 'rgba(128, 128, 128, 0.1)',grid:{//echars位置属性top:"5%",left:"3%",right:"10%",bottom:"8%",containLabel:true,},xAxis:{type:"value",boundaryGap:[0,0.01],splitLine:{show:false},axisLine:{show:false,},axisLabel:{show:false,},axisTick:{show:false,},splitArea:{show:false},},yAxis:{type:"category",//y轴lable升序// inverse: true,data:[],splitLine:{show:false},axisLine:{show:false,},axisLabel:{textStyle:{color:"#fff",fontSize:"13",},},axisTick:{show:false,},splitArea:{show:false},nameTextStyle:{fontSize:"100%",color:"black",},},series:[{type:"bar",data:this.callPoliceHistogramData.dataAxis,name:"X",label:{show:true,position:"right",fontSize:"100%",valueAnimation:true,},barWidth:"40%",//柱图宽度//关键代码showBackground:true,//开启背景backgroundStyle:{//设置背景样式color:"rgba(14, 53, 98, 1)",barBorderRadius:10,},itemStyle:{emphasis:{//鼠标经过柱状图的样式},normal:{//设置柱图的渐变barBorderRadius:10,color:newecharts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"#83bff6"},{offset:1,color:"#8800FF"},]),},},},],};

本文转载自: https://blog.csdn.net/niexiansheg/article/details/128255943
版权归原作者 聂先生。 所有, 如有侵权,请联系我们删除。

“eChars横向柱状图配置背景色配置信息”的评论:

还没有评论