ng-apex-charts treemap：圆角、间距及多行多样式标签实现问询

1. 实现圆角边缘与元素间距 #

ApexCharts的Treemap没有直接提供配置项来设置圆角和元素间距，我们可以通过CSS自定义样式来实现：

/* 给Treemap每个矩形元素添加圆角 */
.apexcharts-treemap-rect {
  rx: 8px;
  ry: 8px;
  /* 通过描边实现元素间的间距，颜色设为图表背景色 */
  stroke: #ffffff;
  stroke-width: 4px;
}

• rx和ry是SVG矩形的圆角属性，对应CSS的border-radius；
• stroke和stroke-width用来模拟元素间的padding，将描边颜色设为图表的背景色即可实现视觉上的间距效果。

2. 添加两行不同字号的标签 #

通过配置dataLabels的useHTML: true，允许在formatter中返回HTML结构，从而实现多行不同样式的文本：

修改你的chartOptions中的dataLabels配置：

dataLabels: {
  enabled: true, 
  distributed: true,
  useHTML: true, // 开启HTML支持
  style: {
    colors: this.chartData.map(d => d.labelColor),
    fontWeight: 'normal',
    format: 'scale',
  },
  formatter: function (val: any, opts: any) {
    const yValue = opts.w.config.series[0].data[opts.dataPointIndex].y;
    // 返回HTML结构，分别设置两行的字号
    return `
      <span style="font-size:14px;">${val}</span>
      <br>
      <span style="font-size:12px;">${yValue}%</span>
    `;
  },
},

• useHTML: true是关键，允许渲染HTML内容；
• 通过<span>分别设置两行文本的字号，用<br>实现换行。

修改后的完整代码 #

chartData: any[] = [
  {
    x: '1',
    y: 40,
    fillColor: '#F1EAFA',
    labelColor: '#5A368C',
  },
  {
    x: '2',
    y: 15,
    fillColor: '#E4FCFC',
    labelColor: '#137C7C',
  },
  {
    x: '3',
    y: 45,
    fillColor: '#FEEFF3',
    labelColor: '#9B0E2F',
  },
];

chartOptions: any = {
  series: [
    {
      data: this.chartData,
    },
  ],
  legend: {
    show: false,
  },
  chart: {
    type: 'treemap',
    toolbar: {
      show: false,
    },
    sparkline: {
      enabled: true,
    },
    height: '170px',
  },
  colors: this.chartData.map(d => d.fillColor),
  plotOptions: {
    treemap: {
      distributed: true,
      enableShades: false,
    },
  },
  dataLabels: {
    enabled: true, 
    distributed: true,
    useHTML: true,
    style: {
      colors: this.chartData.map(d => d.labelColor),
      fontWeight: 'normal',
      format: 'scale',
    },
    formatter: function (val: any, opts: any) {
      const yValue = opts.w.config.series[0].data[opts.dataPointIndex].y;
      return `
        <span style="font-size:14px;">${val}</span>
        <br>
        <span style="font-size:12px;">${yValue}%</span>
      `;
    },
  },
};

别忘了在组件的CSS文件中添加之前的自定义样式。

内容的提问来源于stack exchange，提问作者BranchCoder