echarts 添加水平线
时间: 2023-07-07 21:43:19 浏览: 130
要在 Echarts 图表中添加水平线,可以使用 Echarts 的 `series-line` 系列类型。具体步骤如下:
1. 在 Echarts 初始化代码中定义一个 `series` 对象,用于存储要显示的数据。例如:
```javascript
var option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Sales',
type: 'line',
data: [120, 200, 150, 80, 70, 110, 130]
}
]
};
```
2. 在 `series` 对象中添加一个 `markLine` 属性,用于添加水平线。例如:
```javascript
series: [
{
name: 'Sales',
type: 'line',
data: [120, 200, 150, 80, 70, 110, 130],
markLine: {
data: [
{ type: 'average', name: '平均值' }, // 添加一条平均值水平线
{ yAxis: 100, name: '自定义线' } // 添加一条自定义高度的水平线
]
}
}
]
```
在上面的代码中,`markLine` 属性用于添加水平线,其中 `data` 数组中包含了要显示的水平线的信息。水平线可以根据以下两种方式定义:
- `type: 'average'`:添加一条平均值水平线,水平线的位置将显示该系列数据的平均值。
- `{ yAxis: 100, name: '自定义线' }`:添加一条自定义高度的水平线,其中 `yAxis` 属性表示水平线的高度,`name` 属性表示水平线的名称。
3. 将 `option` 对象传递给 Echarts 实例的 `setOption` 方法,以渲染图表。例如:
```javascript
myChart.setOption(option);
```
这样,就可以在 Echarts 图表中添加水平线了。完整代码示例如下:
```javascript
var myChart = echarts.init(document.getElementById('myChart'), 'light');
var option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Sales',
type: 'line',
data: [120, 200, 150, 80, 70, 110, 130],
markLine: {
data: [
{ type: 'average', name: '平均值' }, // 添加一条平均值水平线
{ yAxis: 100, name: '自定义线' } // 添加一条自定义高度的水平线
]
}
}
]
};
myChart.setOption(option);
```