如何在Apache ECharts图表中基于数据标记指定点位？

数据集 #

record1 = { person: "Mike", date: new Date(someDate).toISOString(), value: 25, remark: ""} 
record2 = { person: "Mike", date: new Date(someDate).toISOString(), value: 30, remark: "this is some text"} 
record3 = { person: "John", date: new Date(someDate).toISOString(), value: 10, remark: "and this another text"} 
record4 = { person: "John", date: new Date(someDate).toISOString(), value: 50, remark: ""} 

需求 #

基于上述数据集生成包含“Mike”和“John”两条折线的图表，要求当remark字段存在文本内容时，在对应数据点位置（示例中为Mike的value=30、John的value=10处）显示MarkPoint。

遇到的定位问题 #

MarkPoint功能符合需求，但最初仅实现了基于像素坐标的定位，代码如下：

markPoint: {
    symbol: 'rect',
    symbolSize: 15,
    label: {
        formatter: 'D',
    },
    itemStyle: {
        color: 'rgba(70,78,86,.9)',
    },
    data: [
        { x: 70, y: 140 },
    ],
},

需要实现的是基于分类名称（如"Mike"）和数值（如30）的定位，而非像素坐标，类似如下的写法：

markPoint: {
    symbol: 'rect',
    symbolSize: 15,
    label: {
        formatter: 'D',
    },
    itemStyle: {
        color: 'rgba(70,78,86,.9)',
    },
    data: [
        { x: "Mike", y: 30 },
    ],
},

已找到的解决方案 #

使用coord属性指定分类和数值组成的数组即可实现定位，代码如下：

data:[
    {coord: ['Mike', 30]},
    {coord: ['John', 10]},
]

后续可自行处理动态数据的适配逻辑。

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