echart - 柱状图添加阴影

最新推荐文章于 2024-07-03 16:24:53 发布

kelly0721

最新推荐文章于 2024-07-03 16:24:53 发布

阅读量1.4k

点赞数 7

文章标签： echarts

本文链接：https://blog.csdn.net/kelly0721/article/details/136069983

版权

本文介绍了两种在数据可视化图表中应用的轴提示阴影样式：type为shadow时创建透明的半影效果，以及type为line时改变阴影宽度为实线。这两种方法有助于增强图表的交互性和可读性。

摘要由CSDN通过智能技术生成

有两种方法可以达到这个效果：
在这里插入图片描述

1. type: ‘shadow’

tooltip: {
   trigger: 'axis',
   axisPointer: {
     type: 'shadow',
     shadowStyle: {
       color: '#FD8F67',
       opacity: 0.1,
     },
   },
 },

2. type: ‘line’

用这个方法可以改变阴影的宽度

tooltip: {
   trigger: 'axis',
   axisPointer: {
       type: 'line',
       z:0, // 层级（权重）
       lineStyle: {
         type: 'solid', // 将虚线改为实线
         width: 80, // 设置背景的宽度
         color: '#FD8F67',
         opacity: 0.1,
       },
   },
 },