echarts tooltip 自定义内容

妖心changeless

于 2022-10-11 14:31:04 发布

阅读量483

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/TheSpiritIsHeart/article/details/127262919

版权

本文介绍了ECharts中两种配置图例的方法。方法一使用直接字符串格式化的方式展示x轴内容及不同数据系列的名称和值；方法二通过函数实现更灵活的图例格式化，支持多个数据系列在同一图例中的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：
b:x轴内容 a:数据1名称 c:数据1值 a1:数据2名称 c1:数据2值

formatter: '{b}<br />{a}:{c}'+ '万KW' + '<br />{a1}:{c1}' + '万KW'

方法二：

formatter: function (params) {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal += "<br/>" + params[i].marker + params[i].value + "万KW";
            }
            return relVal;
          },