Echarts:如何在线条上方和线条末端设置标记线标签?
在echarts-3.6.2中,当我为标记行设置Echarts:如何在线条上方和线条末端设置标记线标签?,charts,echarts,Charts,Echarts,在echarts-3.6.2中,当我为标记行设置位置:'end'时,标签将显示在行的末尾 markLine: { data: [{ symbol:"none", name: 'GOAL', yAxis: 3.12 , label:{ normal:{ show:true,
位置:'end'
时,标签将显示在行的末尾
markLine: {
data: [{
symbol:"none",
name: 'GOAL',
yAxis: 3.12 ,
label:{
normal:{
show:true,
position:'end'
}
},
lineStyle: {
normal: {
color: '#5C57FF',
width: 2
}
},
}]
},
但是,我想把它放在线的上方,在线的末端?怎么做
将位置值更改为
insideEndTop
(参见中):
markLine:{
数据:[{
符号:“无”,
名称:“目标”,
雅克斯:3.12,
标签:{
正常:{
秀:没错,
位置:“InsidendTop”
}
},
线型:{
正常:{
颜色:“#5C57FF”,
宽度:2
}
},
}]
},
您好,您对不使用
有什么想法吗位置:“insideEndTop”
,我无法升级echarts插件
没有拐杖/变通方法,我无能为力,因为这是一个非常旧的版本。您需要立即更新Echarts,这是唯一正确的方法。或者您可以尝试使用图形组件模拟标记线,类似于下面的内容,但这是通往地狱的高速公路
var myChart=echart.init(document.getElementById('main');
var选项={
颜色:['rgba(92,87,255,0.3)',
网格:{
左:50,,
底数:50,
},
图形:[{
键入:“组”,
id:'标记线',
边界:“原始”,
儿童:[{
id:'线型',
$action:'替换',
键入:“行”,
隐形:是的,
形状:{
x1:50,
y1:300,
x2:120,
y2:300,
},
风格:{
笔划:“#5C57FF”,
线宽:2,
},
zlevel:10,
}, {
键入:“多边形”,
$action:'替换',
id:'箭头形状',
隐形:是的,
比例:[0.5,0.3],
职位:[90292.5],
形状:{
要点:[
[16, 5],
[16, 47],
[38, 26]
]
},
风格:{
填写:“#5C57FF”,
}
}, {
键入:“文本”,
$action:'替换',
id:'标签形状',
隐形:是的,
风格:{
正文:“目标:3.12”,
x:-100,
y:290,
填写:“#5C57FF”,
字体:“粗体12px无衬线”,
},
zlevel:10,
}],
}],
xAxis:{
数据:[“1”、“2”、“3”、“4”、“5”、“6”]
},
亚克斯:{
类型:“值”,
最高:50
},
系列:[{
名称:'系列',
类型:'bar',
数据:[5,20,36,10,10,20],
}]
};
myChart.setOption(选项);
函数renderMarkLine({instance,yAxisValue,text,speed}){
var currentStep=0;
变量arrowShape=(val)=>{
返回{
stopCoord:710,//525
选择:{
隐形:假,
id:'箭头形状',
位置:[5+val,yAxisValue-7.5]//yAxisValue+7.5
}
}
};
变量lineShape=(val)=>{
返回{
stopCoord:680,//540
选择:{
id:'线型',
隐形:假,
形状:{
x1:50,
y1:yAxisValue,//+0
x2:50+val,
y2:yaxis值
}
}
}
};
var标签形状=(val)=>{
返回{
stopCoord:660,//460
选择:{
id:'标签形状',
隐形:假,
风格:{
x:-10+val,
y:yAxisValue-10,//10
填写:“#5C57FF”,
字体:“粗体12px无衬线”
}
}
}
};
var interval=setInterval(函数(){
var graphicData=[];
[箭头形状、线条形状、标签形状].forEach(el=>{
if(el(null).stopCoord>currentStep){
graphicData.push(el(currentStep).opts);
}
});
如果(graphicData.length==0)clearInterval(interval);
setOption({graphic:graphicData});
电流阶跃+=10;
},速度);
};
renderMarkLine({实例:myChart,yAxisValue:500,速度:0})代码>
对不起,我的电子艺品版本是echarts-3.6.2,似乎我无法使用需要4.7.0版本的insideEndTop
。您好,您是否有任何不使用“position:“insideEndTop”的想法?我无法升级电子艺品插件,请参阅第二个答案谢谢您的回答。您能帮我解决这个问题吗: