公司的原型图如下:
这里需要实现横向柱状图的背景阴影圆角,查了之后才知道柱状图背景属性,记录一下
实现方案
下面展示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" },
]),
},
},
},
],
};