echarts多个series进行自定义tooltip的数据显示

最新推荐文章于 2024-08-22 11:35:31 发布

ChangYan.

最新推荐文章于 2024-08-22 11:35:31 发布

阅读量2.1k

点赞数 1

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

本文链接：https://blog.csdn.net/changyana/article/details/128615514

版权

前端专栏收录该内容

85 篇文章 2 订阅

订阅专栏

文章讲述了在ECharts图表中，如何通过配置tooltip的formatter属性来定制显示两组数据，一组以K为单位，另一组以%为单位。代码示例展示了如何处理params数组中的数据并设置相应的展示格式。

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

如图，我有两组数据要进行显示，后边要跟的内容不同，第一组数据显示K，第二组数据显示%
在这里插入图片描述

所以需要用到的是tooltip下面的`formatter``，具体代码如下：

        tooltip: {
          trigger: 'axis',
          axisPointer: { animation: false },
          appendToBody: true,
          formatter: (params) => {
            return `<div style="text-align:left">` + params[0].marker + params[0].seriesName + `<b style="float: right">` + params[0].value + `K</b></div>
                    <div style="text-align:left">` + params[1].marker + params[1].seriesName + `<b style="margin-left: 10px; float: right">` + params[1].value + `%</b></div>`
          }
        },