echarts+graphic配置项添加自定义文本

一、配置项概述

graphic: [
    {
        type: 'text', // 元素类型：文本
        left: 'center', // 水平位置：居中
        top: 'center', // 垂直位置：居中
        style: {
            text: '自定义文本', // 文本内容
            textAlign: 'center', // 水平对齐方式
            fill: '#fff', // 文本颜色
            font: '18px Arial', // 字体样式
        },
    },
]

2. graphic 中的主要配置项

我们来详细解析一下代码中的各个配置项：

2.1 type: 'text'

这个配置项指定了图形元素的类型，type: 'text' 表示我们要添加的是文本。如果你想添加其他图形元素，比如矩形或图片，可以更改为 'rect' 或 'image'。

2.2 left 和 top

这两个属性用来设置文本的显示位置。常用的值包括 'center'（居中）、'left'（左对齐）、'right'（右对齐）、'top'（顶部对齐）、'bottom'（底部对齐）。在上面的例子中，left: 'center' 和 top: 'center' 将文本放置在图表的中心位置。

2.3 style

style 是一个包含文本样式的对象，内含多个属性

• text：设置显示的文本内容。你可以在文本中使用 \n 来实现换行。例如，'机构总数\n10' 表示文本“机构总数”和数字“10”分别显示在两行。

• textAlign：设置文本的水平对齐方式。常用值为 'left'、'center' 和 'right'。在这个例子中，textAlign: 'center' 表示文本会水平居中对齐。

• fill：设置文本的颜色，使用十六进制颜色代码（如 #fff 表示白色）、RGB 或 RGBA 值。fill: '#fff' 表示文本颜色为白色。

• font：设置字体的大小和字体。可以使用 CSS 样式的格式，例如 '18px Arial' 表示字体大小为18像素，字体为 Arial。

3、总结

graphic 是 ECharts 提供的一种功能，允许我们在图表中添加自定义的元素，比如文本、图片或形状。它非常灵活，可以让你根据需求在图表的任何地方插入内容。

最常用的元素类型是 文本。比如你想在图表的中心位置添加一些文字