需要达到的效果图如下:
需要实现这种的效果我们需要用到,graphic这个Api,具体实现:
1.在graphic使用elements这个属性;
2.设置title需要几个title你就设置几个;
3.属性解释:
- type设置他的类型,可以是文字也可以是其他的。
-
left、bottom、top等是设置他的位置使用center就是居中对齐
-
style是设置他的样式益对象的形式出显;
-
style.tex是设置名称,style.fill是设置颜色;style.fontSize是设置大小;
-
elements.rotation: Math.PI / 2,这个属性用来旋转文本的
具体代码如下
graphic: {
elements: [
{
type: "text",
left: "center",
bottom: "0",
style: {
text: "文本1",
fill: "#333", // 文本颜色
fontSize: 15,
},
},
{
type: "text",
// left: "0",
top: "center",
style: {
text: "文本2",
fill: "#333", // 文本颜色
fontSize: 15,
},
rotation: Math.PI / 2,
},
]
}