公司的原型图如下:
这里需要实现横向柱状图的背景阴影圆角,查了之后才知道柱状图背景属性,记录一下
实现方案
下面展示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: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#83bff6" }, { offset: 1, color: "#8800FF" }, ]), }, }, }, ], };
复制