ECharts图表是商业级数据图表，是纯Javascript的图表库。最近的项目中出现一个需求，需要折线图某个点着重的标记出来。

在查阅ECharts文档后，以ECharts官方实例的基础上进行修改就可以达成这个目标啦~

附上官方实例链接[https://gallery.echartsjs.com/editor.html?c=xjgkzLI6vp]：

需求是，黑色三个圆点需要标记出来，黑色的两条线也要以两条虚线自定义画出来。

查找到markPoint属性，设置折线图各个点值；markLine属性，设置虚线值。

markPoint: {
            data: [
                {
                    name:'某个坐标',
                    yAxis:'2.2',
                    xAxis:'04:30',
                    value:'标记1'
                    
                },
                {
                    name:'某个坐标',
                    yAxis:'3',
                    xAxis:'05:30',
                    value:'标记2'
                },{
                    name:'某个坐标',
                    yAxis:'2.1',
                    xAxis:'06:00',
                    value:'标记3'
                }
            ]
        },
markLine: {
            data: [{
                    // type: 'average',
                    yAxis:-1,
                    name: '最小范围',
                    itemStyle: {
                        color: '#2E90D1'
                    }
                },
                {
                    yAxis:5,
                    name:'最大范围',
                    itemStyle: {
                    color: '#2E90D1'
                }
            }]
        }

完成~

如果希望标注基于直角系的定位，可以通过xAxis，yAxis实现，这两个值都会根据坐标轴类型与值进行计算。

除了上面的方法，下面几种方式也可以指定标注的位置。

1.通过 x, y 属性指定相对容器的屏幕坐标，单位像素，支持百分比。

2.用 coord 属性指定数据在相应坐标系上的坐标位置，单个维度支持设置 'min', 'max', 'average'。

3.直接用 type 属性标注系列中的最大值，最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。

当多个属性同时存在时，优先级按上述的顺序。

示例：

data: [
    {
        name: '最大值',
        type: 'max'
    }, 
    {
        name: '某个坐标',
        coord: [10, 20]
    }, {
        name: '固定 x 像素位置',
        yAxis: 10,
        x: '90%'
    }, 
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]