解决Echarts图表中tooltip无法换行问题

Э时间行者于我

于 2024-06-14 18:10:48 发布

阅读量436

点赞数 10

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

本文链接：https://blog.csdn.net/qq_45094682/article/details/139687636

版权

echarts 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

解决Echarts图表中tooltip无法换行问题

这里设置宽度、颜色都是是可以生效的，但就是不换行
echarts

解决办法tooltip. extraCssText

echarts

extraCssText: 'max-width:300px; white-space:pre-wrap'

echarts tooltip

tooltip: { // 单个柱子显示悬浮内容
          extraCssText: 'max-width:300px; white-space:pre-wrap',
          formatter: function(params) {
            let transportType = '' // 运输方式
            let chineseName = '' // 国家中文名称
            let deliverCount = '' // 发货数量
            let drawCount = '' // 提取数量
            let drawRate = '' // 提取率
            let effectCount = '' // 签收数量
            let effectRate = ''// 签收率
            let lastDeliverTime = '' // 最晚到仓时间
            let averageAging = ''// 平均时效
            let abnormalRemark = ''// 异常备注
            const matchingItem = arrSet1.find(item => item.shortName === params.seriesName && item.deliverDate === params.name)

            if (matchingItem) {
              transportType = matchingItem.transportType
              chineseName = matchingItem.chineseName
              deliverCount = matchingItem.deliverCount
              drawCount = matchingItem.drawCount
              drawRate = matchingItem.drawRate || 0
              effectCount = matchingItem.effectCount
              effectRate = matchingItem.effectRate
              lastDeliverTime = matchingItem.lastDeliverTime ? _this.$moment(matchingItem.lastDeliverTime).format('YYYY-MM-DD HH:mm:ss') : '' // 最晚到仓时间
              averageAging = matchingItem.averageAging != null ? matchingItem.averageAging : '' // 平均时效
              abnormalRemark = matchingItem.abnormalRemark != null ? matchingItem.abnormalRemark : ''
            }
            let result0 = `运输方式：${transportType} ` + '<br>' + `国家：${chineseName}` + '<br>' + `发货数量：${deliverCount}` + '<br>'
            let result1 = `提取数量：${drawCount}` + '<br>' + `提取率：${drawRate} %` + '<br>' + `签收数量：${effectCount}` + '<br>' + `签收率：${effectRate} %`
            let str = params.seriesName + '<br>' + result0 + result1 + '<br>' + `发货时间：${params.name}<br>最晚到仓时间：${lastDeliverTime}<br>平均时效：${averageAging}<br>异常备注：${abnormalRemark}`
            return str
          }
        }