echarts 两个x轴只显示一个tooltip

原创已于 2022-12-02 10:29:15 修改 · 7.9k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html5

于 2019-12-20 16:03:26 首次发布

echarts 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在ECharts中处理双X轴图表，包括仅保留一个Tooltip的配置方法，修改Tooltip样式以增强数据展示效果，以及通过xAxisIndex实现不同数据对应不同X轴的技巧。

先上图

两个x轴，且本应有两个tooltip,通过以下修改可以是一个tootip，且修改tooltip样式。

在这里插入图片描述

问题一：只保留一个tooltip

tooltip直接设置是全局模式，有几个x轴显示几个x轴的tooltip，可以通过设置axisPointer进行去除。
代码展现：

	xAxis:[{
		},{
		//去除第二个x轴的tooltip
			axisPointer: {
                        	type: 'none'
                        },
		}
	]

问题二：修改tooltip样式

                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            // return echarts.format.truncateText(name[0].axisValue, 40, '14px Microsoft Yahei', '…');
                            return  params[0].axisValue+'\n'+
                                    params[0].marker+params[0].seriesName+" : "+params[0].data+'\n'+
                                    params[1].marker+params[1].seriesName+" : "+params[1].data+'\n'+
                                    params[2].marker+params[2].seriesName+" : "+params[2].data+'\n'+
                                    params[3].marker+params[2].seriesName+" : "+params[3].data+'\n';
                        },
                        //使'\n'起作用
                        extraCssText:'white-space:pre-wrap'
                    },