echarts柱状选中shadow阴影背景宽度设置

使用line,宽度增大到所需要的宽度,设置下颜色+透明度就行

javascript 复制代码
tooltip: {
      trigger: 'axis',
      //把阴影的层级往下降
      z:-15,
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgba(150,150,150,0.3)',
          width: 44,
          type: 'solid',
        },
      },
},
series: [
        {
        type: 'bar',
        barWidth:20,//柱状宽度
        barGap:'20%',//坐标轴占比
        itemStyle: {//柱状图渐变
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#f5b78c' },
            { offset: 0.3, color: '#a3948b' },
            { offset: 0.5, color: '#838485' },
            { offset: 0.8, color: '#395064' },
            { offset: 1, color: '#273d4f' }
            ])
        },
        emphasis: { label: { show: true ,position:'top',color:'pink'} },//鼠标放上显示柱状图数据
        data:[200,1000,800,500,25,14,950]
        }
    ]


相关推荐
觉醒法师2 分钟前
HarmonyOS开发 - 电商App实例二( 网络请求http)
前端·http·华为·typescript·harmonyos·ark-ts
沈剑心2 分钟前
Kotlin的协程,真能提升编程效率么?
android·前端·kotlin
堕落年代13 分钟前
Vue主流的状态保存框架对比
前端·javascript·vue.js
没资格抱怨14 分钟前
el-pagination的使用说明
javascript·vue.js·elementui
OpenTiny社区23 分钟前
TinyVue的DatePicker 组件支持日期面板单独使用啦!
前端·vue.js
冴羽24 分钟前
Svelte 最新中文文档教程(22)—— Svelte 5 迁移指南
前端·javascript·svelte
树上有只程序猿28 分钟前
Vue3组件通信:多个实战场景,轻松玩转复杂数据流!
前端·vue.js
青红光硫化黑33 分钟前
React基础之useEffect
javascript·react.js·ecmascript
剪刀石头布啊35 分钟前
css属性值计算过程
前端·css
bin915340 分钟前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14基础固定表头示例
前端·javascript·vue.js·ecmascript·deepseek