echarts底部滚动条样式调整,去掉默认背景

在这里插入图片描述
这个滚动条的背景真的恶心,还不好调,丑死,官网查配置
滚动条属性值dataZoom
看官网配置
在这里插入图片描述

backgroundColor设置#fff背景色白色
dataBackground是设置阴影样式的,下面还有属性,继续往下看
在这里插入图片描述
在这里插入图片描述

lineStyle下有属性,opacity设置0.,线没了
在这里插入图片描述

areaStyle设置阴影,下面属性opcaity属性跳透明度,设置0,这样阴影就去掉了,看效果,直接官网找个例子
在这里插入图片描述
更多属性设置可参考以上。

最终效果如下:
源码:
dataZoom: [
{
type: “slider”,
start: 0,
end: 60,
bottom: 20,
backgroundColor:’#EDF0F5’,
handleSize: 30,
handleIcon: ‘image://data:image/png;base64,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’,
dataBackground:{
lineStyle:{
opacity:0
},
areaStyle:{
opacity:0
}
},
selectedDataBackground:{
lineStyle:{
opacity:0
},
areaStyle:{
opacity:0
},
brushStyle:{
borderColor:’#f00’
}
},

       height:6,
       fillerColor:' #A3A1FB',
       textStyle:{
            color:'transparent'
          },
      },
    ],

在这里插入图片描述

### 自定义 ECharts 图表滚动条样式 为了自定义 ECharts 图表的滚动条样式,可以通过 `dataZoom` 组件来实现。具体来说,在配置项中可以设置多种属性来自定义滚动条的高度、位置、颜色等。 #### 设置滚动条高度和位置 通过修改 `height`, `left`, 和 `bottom` 属性能够改变滚动条的高度以及其相对于图表的位置: ```javascript dataZoom = [{ height: 15, left: '10%', bottom: 20, }]; ``` 上述代码片段设置了滚动条的高度为15像素,并将其放置于图表左侧边缘向内偏移10%处,底部则留有20像素的空间[^3]。 #### 定义滑块外观 对于滑块本身的视觉效果,如边框颜色(`borderColor`)、填充颜色(`fillerColor`)及背景色(`backgroundColor`)都可以单独设定,从而达到更贴合设计需求的效果: ```javascript { borderColor: "#eee", fillerColor: '#009688', backgroundColor: '#eee' } ``` 这里选择了浅灰色作为边界线的颜色,而深绿色用于表示已选择区域内的部分;未被选中的部分将以相同的浅灰度呈现出来。 #### 调整手柄尺寸与图标 如果希望进一步优化用户体验,则可考虑调整两侧的手柄大小(`handleSize`)或是更换默认箭头形状(`handleIcon`): ```javascript { handleSize: "80%", handleIcon: "M100.7,49.1L8.9,1.3C5.1-0.7-0.7,4.7-0.7,10l0,39.1c0,5.3,5.8,10.7,10.6,10.7h75.3c4.8,0,10.6-5.4,10.6-10.7L111.3,10 C111.3,4.7,105.5-0.7,100.7,1.3z M83.1,49.1c0,14.6-11.9,26.5-26.5,26.5S28.1,63.7,28.1,49.1 S40,22.6,53.6,22.6S83.1,34.5,83.1,49.1z" } ``` 此段脚本不仅增大了手柄占据的比例至整个宽度的大约五分之四,还替换了原有的简单三角形图案为更加精致的小箭头图形。 综上所述,通过对这些参数细致入微地调节,完全可以打造出既美观又实用的Echarts图表滚动条组件。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值