由一个Echarts需求引发的思考，附完整代码解决方案

豆苗学前端
64 阅读3分钟

Echarts的各种图最多了，比如突然出现一个这样的，请问阁下应该如何应对

image.png

首先我一看到这个需求的时候就是比较懵的，还尝试过去Echarts找这样的示例，但是结果不尽人意！

所以换了个思路自己摸索...........

方案1：先实现比值效果

image.png

思路：

首先，我们创建一个 `option` 对象来配置图表的样式和数据。在 `option` 对象中，我们设置了 `backgroundColor` 属性来指定背景颜色为更浅的灰色。

然后，我们在 graphic 属性下创建了一个图形组。图形组是用来容纳各种图形元素的容器。我们设置了 left 和 top 属性来将图形组居中显示。

在图形组中，我们添加了一个矩形元素。矩形的位置由 left 和 top 属性控制，形状由 shape 属性定义。我们将矩形的宽度设置为 200，高度设置为 60，并使用 r 属性设置圆角半径为 30。通过 fill 属性设置矩形的背景颜色为蓝色。

接着，我们添加了一个文本元素。文本的内容由 text 属性定义。我们将文本的对齐方式设置为居中，并使用 textVerticalAlign 属性将文本垂直居中显示。通过 font 属性设置文本的样式，包括字体大小和字体家族。使用 fill 属性设置文本的颜色为白色。

最后，我们将图形组添加到 graphic 属性中，完成了图表的配置。

代码实现：

option = {
    backgroundColor: '#F0F0F0', // 更浅的背景颜色
    graphic: [{
        type: 'group',
        left: 'center',
        top: 'center',
        children: [
            {
                type: 'rect',
                left: -100,
                top: -30,
                shape: {
                    width: 200,
                    height: 60,
                    r: 30
                },
                style: {
                    fill: '#3498DB', // 一个蓝色背景
                }
            },
            {
                type: 'text',
                style: {
                    text: '2 : 9',
                    textAlign: 'center',
                    textVerticalAlign: 'middle', // 垂直居中
                    font: 'bold 36px Arial, sans-serif', // 改变字体
                    fill: 'white', // 白色字体
                }
            }
        ]
    }]
};

那么问题来了，比值上面的字体怎么设置呢？

  1. 在 option 对象中的 graphic 属性中找到比值字体所在的 text 元素，即数字 "2 : 9" 的文本元素。
  2. 在 children 数组中添加两个 text 元素，一个用于显示 "导师"，另一个用于显示 "学员"。
  3. 设置新添加的文本元素的位置和样式，使其位于数字上方且居中对齐。

image.png

结果就是这样，似乎文本的位置不起作用

 children: [
        {
          type: 'text',
          style: {
            text: '医师',
            left: -40,
            top: -15,
            textAlign: 'center',
            font: '18px Arial, sans-serif',
            fill: '#CCC'
          }
        },
        {
          type: 'text',
          style: {
            text: '住院',
            right: -40,
            top: -15,
            textAlign: 'center',
            font: '18px Arial, sans-serif',
            fill: '#CCC'
          }
        },
        {
          type: 'text',
          style: {
            text: '2 : 9',
            textAlign: 'center',
            textVerticalAlign: 'middle', // 垂直居中
            font: 'bold 36px Arial, sans-serif', // 字体大小
            fill: '#3498DB', // 字体颜色为蓝色
          },
          left: -18,
          top: -5
        }
      ]

结果又是一番思考验证，发现在 Echarts 的 text 组件中，我们不能通过直接设置 left、top、right 和 bottom 属性来调整文本的位置。相反，我们可以使用 position 属性来设置文本的相对位置。

最后修成正果： 来看效果图

image.png

附完整代码

// 在 Echarts 的 text 组件中，我们不能通过直接设置 left、top、right 和 bottom 属性来调整文本的位置。
// 相反，我们可以使用 position 属性来设置文本的相对位置。
// 对于数字部分的 left 和 top 属性，请保留原值不变，以确保数字的位置保持在中心
option = {
  backgroundColor: '#F0F0F0', // 更浅的背景颜色
  graphic: [
    {
      type: 'group',
      left: 'center',
      top: 'center',
      children: [
        {
          type: 'text',
          style: {
            text: '导师',
            textAlign: 'center',
            x: -8,
            y: -33,
            font: '12px Arial, sans-serif',
            fill: '#7e7c7c'
          }
        },
        {
          type: 'text',
          style: {
            text: '学员',
            textAlign: 'center',
            x: 43,
            y: -33,
            font: '12px Arial, sans-serif',
            fill: '#7e7c7c'
          }
        },
        {
          type: 'text',
          style: {
            text: '1 : 3',
            textAlign: 'center',
            textVerticalAlign: 'middle', // 垂直居中
            font: 'bold 36px Arial, sans-serif', // 字体大小
            fill: '#1890ff', // 字体颜色为蓝色
          },
          left: -18,
          top: -18
        }
      ]
    }
  ]
};
avatar
文章
阅读
粉丝