echarts中使用svg,如何在以下代码中将image图片换成svg
var renderItem = function(params,api){
const type = api.value(2);
const voltageLevel = api.value(3);
const leafNum = api.value(5);
const direction = api.value(6);
const x1 = api.value(0);
const y1 = api.value(1);
const group = {
type:'group',
x:50,
y:0,
children: []
};
if(type == "二卷主变"){
group.children.push({
type:'image:',
x:x1*width+offset2X,
y:y1*height+offset2Y,
style:{
width:width_2,
height:height_2,
image:'image:svg.svg'
}
});
} else if( type == "三卷主变"){
group.children.push({
type:'image',
x:x1*width+offset3X,
y:y1*height+offset3Y,
style:{
width:width_3,
height:height_3,
image:'img/4.png'
}
})
};
if(type =='母线'){
switch( direction){
case '上':
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width,
y1:y1*height+offset3Y,
x2:x1*width+width,
y2:y1*height+offset3Y
},
style:{
fill: "#ff0000",
lineWidth:2,
stroke : "#ff5500",
}
});
break;
case '下左':
if(voltageLevel == 10){
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width+offset3X,
y1:offset3Y+width_3+y1*height,
x2:x1*width-leafNum*width*0.5,
y2:offset3Y+width_3+y1*height
},
style:{
fill: "#ff0000",
lineWidth:2,
stroke : "#ff5500",
}
});
}else{
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width+offset3X,
y1:offset3Y+width_3+y1*height,
x2:x1*width-leafNum*width,
y2:offset3Y+width_3+y1*height
},
style:{
fill: "#ff0000",
lineWidth:2,
stroke : "#ff5500",
}
});
}
break;
case '下右':
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width+width-offset3X,
y1:offset3Y+width_3+y1*height,
x2:x1*width+leafNum*width-offset3X,
y2:offset3Y+width_3+y1*height
},
style:{
fill: "#ff0000",
lineWidth:2,
stroke : "#ff5500",
}
});
break;
case '下':
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width+offset2X,
y1:offset3Y+width_3+y1*height,
x2:x1*width+width-offset2X,
y2:offset3Y+width_3+y1*height
},
style:{
fill: "#ff0000",
lineWidth:2,
stroke : "#ff5500",
}
});
break;
case '上右':
if(voltageLevel == 110){
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width,
y1:offset3Y+y1*height,
x2:x1*width+6*width-offset2X,
y2:offset3Y+y1*height
},
style:{
fill: "#ff0000",
lineWidth:2,
stroke : "#ff5500",
}
});
}else{
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width+offset2X,
y1:offset3Y+y1*height,
x2:x1*width+leafNum*width-offset2X,
y2:offset3Y+y1*height
},
style:{
fill: "#ff0000",
lineWidth:2,
stroke : "#ff5500",
}
});
}
break;
}
}
if(type == '线路'){
switch( direction){
case '上':
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width+width/2,
y1:height_3+offset2Y,
x2:x1*width+width/2,
y2:height+offset2Y
},
style:{
fill: "#ffff00",
lineWidth:5,
stroke : "#ffff00",
}
});
break;
case '上右':
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width+leafNum*width/2,
y1:y1*height-offset2Y,
x2:x1*width+leafNum*width/2,
y2:y1*height+offset2Y
},
style:{
fill: "#ffff00",
lineWidth:5,
stroke : "#ffff00",
}
})
break;
case '上右横':
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width+width,
y1:y1*height+offset2Y,
x2:x1*width+width,
y2:y1*height
},
style:{
fill: "#ffff00",
lineWidth:5,
stroke : "#ffff00",
},
});
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width+width,
y1:y1*height,
x2:x1*width+width+width*1.5,
y2:y1*height
},
style:{
fill: "#ffff00",
lineWidth:5,
stroke : "#ffff00",
}
});
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width+width+width*1.5,
y1:y1*height,
x2:x1*width+width+width*1.5,
y2:y1*height+offset2Y,
},
style:{
fill: "#ffff00",
lineWidth:5,
stroke : "#ffff00",
}
});
break;
case '上左横':
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width+width,
y1:y1*height+offset2Y,
x2:x1*width+width,
y2:y1*height
},
style:{
fill: "#ffff00",
lineWidth:5,
stroke : "#ffff00",
},
});
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width+width,
y1:y1*height,
x2:x1*width+width-width*1.5,
y2:y1*height
},
style:{
fill: "#ffff00",
lineWidth:5,
stroke : "#ffff00",
}
});
group.children.push({
type:'line',
x:0,
y:0,
shape:{
x1:x1*width+width-width*1.5,
y1:y1*height,
x2:x1*width+width-width*1.5,
y2:y1*height+offset2Y,
},
style:{
fill: "#ffff00",
lineWidth:5,
stroke : "#ffff00",
}
});
break;
}
};
return group;
}
echart一般是canvas 画的，想生成svg图表，建议使用d3.想使用echart创建svg图表的话，可以选择图表类型为svg，顺便提一下，建议看一下官方文档的options，你这问题提的肯定不会有人回答，第一，没人会重复造轮子，第二有能力造这个轮子的肯定不会理会你这个问题。虽然不知道你想实现什么功能，但是肯定有比这个好的方法
svg可以用图片作为源，代码么，看web api