ECharts图表是商业级数据图表，是纯Javascript的图表库。最近的项目中出现一个需求，需要折线图某个点着重的标记出来。
在查阅ECharts文档后，以ECharts官方实例的基础上进行修改就可以达成这个目标啦~
附上官方实例链接[gallery.echartsjs.com/editor.html…]：
需求是，黑色三个圆点需要标记出来，黑色的两条线也要以两条虚线自定义画出来。
查找到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
}
]
