ECharts的graphic文字动态居中

原创于 2024-12-31 15:21:07 发布

· 341 阅读

1 ·

版权

文章标签：

#ECharts #前端

ECharts的graphic文字动态居中

option.graphic

主要是使用graphic的group来处理。

graphic: {
  elements: [
    {
      type: 'group', // 使用 group 进行约束
      left: '30%',
      top: '40%',
      bounding: 'raw', // 配个 raw 来改变 rect 计算方式，默认是 all
      children: [
        {
          type: 'text',
          style: {
            fill: '#FFFFFF',
            text: chartDataRef.value[0]?.total || 0 + '\n',
            font: '28px Microsoft YaHei',
            textVerticalAlign: 'middle',
            textAlign: 'center'
          }
        }
      ]
    },
    {
      type: 'text',
      left: '22.5%',
      top: '56%',
      style: {
        fill: '#FFFFFF',
        text: ['设备总数'].join('\n'),
        font: 'lighter 14px Microsoft YaHei'
      }
    },
    {
      type: 'image',
      left: '-3.5%',
      top: '-0%',
      style: {
        image: '/images/circle-bg.png',
        width: 248,
        height: 200
      }
    }
  ]
}