The company’s prototype is as follows:
Here we need to implement the background shadow rounded corners of the horizontal histogram. After checking, we will know the background properties of the histogram and record it.
Implementation plan
The options are shown below 代码片.
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" },
]),
},
},
},
],
};