当前位置:   article > 正文

echarts -- tooltip_echarts折线图tooltip配置

echarts折线图tooltip配置
  1. tooltip: {
  2. show: true,
  3. trigger: 'axis',
  4. formatter: '{b}:<br>{c} 台',
  5. axisPointer: {
  6. type: 'shadow'
  7. },
  8. textStyle: {
  9. color: '#fff',
  10. fontStyle: 'normal',
  11. fontWeight: 'normal',
  12. fontFamily: 'sans-serif',
  13. fontSize: 12,
  14. }
  15. },

1、trigger:设置tooltip内容是单个节点还是一列

        值:item 只显示选中的那一个节点

                axis 一般用于多组数据,比如堆叠折线图或者堆叠柱状图,会显示那一组的数据

2、axisPointer:指示器类型

        值:shadow 阴影指示器

                line 直线指示器

                none 无指示器

                cross 十字准星指示器

3、textStyle:设置提示框文字样式

4、formatter:可以定义提示框显示的内容

        (1)字符串模板

                formatter: '{b}:<br>{c} 台',

                常见变量有 {a}, {b},{c},{d}

{a}系列名称
{b}数据项名称
{c}数值
{d}百分比(饼图)

                如果trigger的值为axis时,可以通过{a0},{a1},这样添加索引的方式来表达。

                缺点:不能显示出横轴纵轴以外隐藏的数据,不够灵活

        (2)回调函数

                

  1. formatter: function (params) {
  2. var tar = params[0];
  3. return (
  4. tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value
  5. );
  6. }

        可以通过console.log打印一下params具体的内容,根据自己需求设置显示内容

常用:

  1. formatter: function (p) {
  2. let div = `
  3. ${p[0].name}
  4. <br/>
  5. ${p[0].marker + p[0].seriesName}:${p[0].value}
  6. <br/>
  7. ${p[1].marker +p[1].seriesName}:${p[1].value}
  8. `;
  9. return div;
  10. },

marker:是一个span标签,可以展示出一个小圆点

p[0].seriesName:是series数组中第0项的name属性值

p[0].value:是series数组中第0项的data中对应的值

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/308756
推荐阅读
相关标签
  

闽ICP备14008679号