zoukankan      html  css  js  c++  java
  • echarts中,自定义tooltip提示框样式

    最近在做echarts图表的时候,由于数据需要保留两位小数显示,结果桑吉图他有个总数值是自己计算的,所以浮点数计算导致数值小数位不止两位,就需要做处理,记录一下踩过的坑

    1.采用了formatter回调函数的方式,自己拼写字符串,给显示的数值做一个数据处理保留两位小数

    2.由于数据过多,导致tooptip被遮盖,显示不全各种问题,也同样可以解决

    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器,坐标轴触发有效
        type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
      },
      enterable: true, // 鼠标是否可进入提示框浮层中
      hideDelay: 200, // 浮层隐藏的延迟
      confine: true,
      backgroundColor: 'rgba(255,255,255, 1)',
      formatter: function (params) {
        var htmlStr = '<div style="height: auto;max-height: 240px;overflow-y: auto;"><p>' + params[0].axisValue + '</p>';
        for (var i = 0; i < params.length; i++) {
          htmlStr += '<p style="color: #666;">' + params[i].marker + params[i].seriesName + ':' + params[i].value + '</p>';
        }
        htmlStr += '</div>'
        return htmlStr
      },
      extraCssText: 'box-shadow: 0 0 3px rgba(150,150,150, 0.7);',
      textStyle: {
       fontSize: 12,
       color: '#fff'
      }
     },
     legend: {
       type: 'scroll',
       orient: 'horizontal',
       left: 15,
       right: 15,
       bottom: 10,
       data: legendData,
       pageButtonPosition: 'end'
    },
  • 相关阅读:
    创建与合并分支
    Git丢弃本地修改
    《人月神话》小记
    财商培养
    赚钱有道,增加睡后收入
    学点经济学,升级认知
    保险小白普及知识
    管理决策、资源分配的最理想状态
    AI时代做一个终身学习者
    基于需求的测试
  • 原文地址:https://www.cnblogs.com/shine1234/p/14832470.html
Copyright © 2011-2022 走看看