echarts绘制多条线
echarts成为我生活中不可或缺的一部分。直到它坑了我😒
项目上要画多条线,用lines
写完了发现出不来东西,可这文档翻遍都没发现有啥错误
最后发现要在xAxis
和yAxis
设置一个范围把内容框起来才行,如果不加这个属性,只能起点是[0,0]
来画多条线。
关键代码
xAxis: {
min: 0,
max: 100,
show: false,
type: 'value'
},
yAxis: {
min: 0,
max: 100,
show: false,
type: 'value'
},
完整代码
option = {
xAxis: {
min: 0,
max: 100,
show: false,
type: 'value'
},
yAxis: {
min: 0,
max: 100,
show: false,
type: 'value'
},
series: [
{
name: 'A',
type: 'lines',
coordinateSystem: 'cartesian2d',
z: 1,
polyline: true ,
effect: {
show: true,
period: 4,
smooth: true,
trailLength: 0.2,
// symbol: 'arrow',
symbol: 'circle',
color: 'rgba(55,155,255,0.5)',
symbolSize: 20
},
data: [{
coords: [
[0, 0], // 起点
[50, 300], // 终点
]
},
{
coords: [
[50, 0], // 起点
[0, 100], // 终点
]
}
]
}
]
}