echarts line动态设置markerline
时间: 2023-12-29 12:04:57 浏览: 53
在Echarts图中给坐标轴加一个标识线markLine
要动态设置 Echarts 中的线图 marker 线条,你需要通过 `option.series` 中的 `data` 属性来设置每个数据点的样式,包括线条颜色、宽度和类型等属性。然后使用 `option.series` 中的 `markLine` 属性来设置标记线。
以下是一个简单的示例代码,用于设置动态 marker 线条:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
markLine: {
data: [
{type: 'average', name: '平均值'},
{coord: ['Mon', 1000], symbol: 'none', lineStyle: {color: 'red', type: 'dashed'}}
]
}
}]
};
```
在上面的代码中,我们首先设置了 x 轴和 y 轴的基本属性。然后,在 `series` 中设置了数据和类型为 `line` 的线图。在 `markLine` 属性中,我们设置了两个标记线。第一个标记线类型为 `average`,表示平均值的线条样式,第二个标记线的坐标为 `['Mon', 1000]`,表示横坐标为 `Mon`,纵坐标为 `1000`,线条样式为 `red` 红色虚线。
你可以根据自己的需求调整标记线的样式和位置。
阅读全文