echarts tooltip某项无数据时展示null的处理方式

最新推荐文章于 2024-05-30 14:09:13 发布

good法乐

最新推荐文章于 2024-05-30 14:09:13 发布

阅读量264

点赞数 1

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

本文链接：https://blog.csdn.net/qq_39206750/article/details/139008513

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

处理前在这里插入图片描述
处理后

    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(68,86,153,0.61)',
      borderWidth: 1,
      borderColor: '#91E4FF',
      extraCssText: 'box-shadow: inset 0 1px 54px 0 rgba(145,248,255,0.2)',
      formatter: function (params: Dictionary) {
        const wrap = (content: string) =>
          `<div style="font-size: 14px;color: #fff;">${content}</div>`

        const list = params
          .filter((item: Dictionary) => item.value!=='null')
          .map(
            (item: Dictionary) =>
              '<div>' +
              `<span style="margin-right: 5px; font-size: 16px; font-family: Consolas;display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color:${item.color};"></span>` +
              `${item.seriesName} ${item.value} 万元</div>`
          )

        if (!list.length) {
          return wrap('暂无数据')
        }

        return wrap(`<div>${params[0].name}</div>` + list.join(''))
      },
    },