echarts折线图一段实线一段虚线
时间: 2023-07-01 18:28:02 浏览: 574
echarts 双折线图 实现 与虚线
要在 echarts 折线图中实现一段实线一段虚线的效果,可以使用 echarts 中 `lineStyle` 属性中的 `type` 和 `dashArray` 参数来实现。具体来说,将 `type` 设置为 `'solid'` 表示实线,将 `type` 设置为 `'dashed'` 表示虚线,同时将 `dashArray` 设置为一个数组来控制实线和虚线的长度。
例如,以下代码实现了一条红色实线和一条蓝色虚线的折线:
```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',
lineStyle: {
color: 'red',
type: 'solid', //设置实线
}
},
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
lineStyle: {
color: 'blue',
type: 'dashed', //设置虚线
dashArray: [10, 5] //设置虚线和实线的长度
}
}
]
};
```
以上代码中,第一条折线为红色实线,第二条折线为蓝色虚线,虚线和实线的长度比例为 10:5。你可以根据自己的需求调整 `dashArray` 参数来控制虚线和实线的长度比例。
阅读全文