首页 前端知识 eChars横向柱状图配置背景色配置信息

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

2024-04-12 20:04:52 前端知识 前端哥 678 195 我要收藏

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

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

实现方案

下面展示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" },
]),
},
},
},
],
};
复制
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4785.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!