javascript - echarts tooltip 自定义formatter怎么设置颜色？？

Question

echarts的折线图里面我自定义了tooltip 的formatter为：

formatter:'{b}<br/>{a0}:{c0}<br/>{a1}:{c1}'

但是

设置后的tooltip 就没有这个颜色标注了（默认不设置formatter的话会有），怎么把它显示出来？？因为他只提供了{a},{b},{c}三种参数接口并没有颜色这个接口啊？该怎么解决？谢谢

Answer 1

官方文档里面好像没有这个API

默认的tooltip不是canvas而是p;

所以直接在formatter里面添加span设置好颜色就可以了

tooltip: {
          trigger: 'axis',
          formatter: '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#ff6f0b"></span>本房价: {c0}万'
         }

Answer 2

怎么让{a0}显示{c0+c1}呢？即想要{a0}显示两个数值的和而不是单单{a0}?

Answer 3

今天正好遇到了这个问题，可以通过定义函数的方式解决，params 里包含了数据的颜色信息，如果只输出这几个点可以像下边这样写

formatter: function(params) {
    var result = '';
    params.forEach(function (item) {
        result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
    });

    return result;
}