2020-11-13 echarts xAxis axisPointer 设置改变 X轴提示框的样式

最新推荐文章于 2024-10-29 16:34:22 发布

酱香鸭脖

最新推荐文章于 2024-10-29 16:34:22 发布

阅读量4.9k

点赞数 7

分类专栏： echarts 前端文章标签： echarts

本文链接：https://blog.csdn.net/ssoutlook/article/details/109679774

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

echarts

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在Echarts中通过`xAxis.axisLine`设置x轴的颜色，并解决了因`tooltip.type: 'cross'`导致的提示颜色变化问题。解决方案是统一在`tooltip.axisPointer`配置中调整颜色。

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

1.由于代码是复制过来的，然后我想给我的 x轴，的 ‘轴’ 设置颜色,通过 xAxis 的 axisLine实现了这个效果但是设置的的提示也跟着变色了（这个提示是因为我在 tooltip 中设置了 type: 'cross' ，默认自带）

 xAxis: [
            {
                type: 'category',
                data: ['10月', '10月', '12月', '1月'],
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisLine: {//x坐标轴轴线
                    show: true,
                    lineStyle: {//x坐标轴轴线样式
                        color: '#fff',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色                        
                    }
                }
            }
        ],

2.后来查了一下 Echarts 的配置项

3.可以在 tooltip 中统一设置一下 axisPointer 属性，就可以了

 tooltip: {
            transitionDuration: 0,
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999',
                },
                label: {
                    color: '#fff',
                    backgroundColor : '#333'
                }
            }
        },

记录一下