首页 前端知识 echarts5 矩形树图treemap使用

echarts5 矩形树图treemap使用

2024-01-31 12:01:29 前端知识 前端哥 199 180 我要收藏

问题描述:label设置rich之后,文本不能垂直居中

困扰我的效果是这样的:

实际我要得效果是这样的: 

之前的尝试:

 然而并没有用,在rich里的样式设置verticalAlign仍然是没有用

直到我看到了文档:Documentation - Apache ECharts

重要关注这里:

 里面提到了文本块,文本片段,我才恍然大悟

最后的配置:

option = {
  series: [
    {
      type: 'treemap',
      label: {
        verticalAlign: 'middle',
        align: 'center',
        position: 'bottom',
        width: 200,
        height: 74,
        offset: [0, -37],
        formatter: function (info) {
              var name = info.name
              var value = info.value
              let arr = [
                  `{title|${name}}`,
                  `{netFlowIn|累计净流入:${value}}`,
                  `{increase|今日涨幅:${value}%}`,
                ];
              return arr.join('\n');
            },
        rich: {
          title:{
            fontSize: 16,
            height: 30,
            lineHeight: 30,
            fontWeight: 700
          },
          netFlowIn: {
            fontSize: 14,
            height: 22,
            lineHeight: 22
          },
          increase: {
            fontSize: 14,
            height: 22,
            lineHeight: 22
          }
        }
      },
      data: [
        {
          name: 'nodeA',
          value: 10,
          children: [
            {
              name: 'nodeAa',
              value: 4
            },
            {
              name: 'nodeAb',
              value: 6
            }
          ]
        },
        {
          name: 'nodeB',
          value: 20,
          children: [
            {
              name: 'nodeBa',
              value: 20,
              children: [
                {
                  name: 'nodeBa1',
                  value: 20
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};

其中,position设置文本块的位置,width,height设置文本块的尺寸,offset设置文本块的偏移,一起设置,文本块就垂直居中了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/938.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!