我是靠谱客的博主 体贴红牛,最近开发中收集的这篇文章主要介绍echats设置辅助线,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

标记线为legend

option = {
xAxis: {
type: 'category',
data: ['11n2021', '12', '01', '02', '03n2022', '04', '05'],
axisLabel:{
formatter:function(val, index) {
let len=val.length
if(len>2){
let year=val.slice(3,len)
let month=val.slice(0,2)
return `${month}n{y|${year}}`
}
return val
},
rich:{
y:{
fontSize:'20px'
}
}
}
},
legend:{
data:['2021','2022'],
bottom:0
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true,
},
{
name:'2021',
type:'line',
markLine: {
// yAxisIndex: 0,
symbol:'none',//去掉箭头
data:[
{xAxis:1,lineStyle:{color:'green',type:'dotted'},label:{color:'black',formatter:'2021'}},
]
}
},
{
name:'2022',
type:'line',
markLine: {
// yAxisIndex: 0,
symbol:'none',//去掉箭头
data:[
{xAxis:2,lineStyle:{color:'orange',type:'dotted'},label:{color:'black',formatter:'2022'}},
]
}
},
]
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ZrINKKm-1638770285395)(C:UsersPertAppDataRoamingTyporatypora-user-imagesimage-20211206135605666.png)]

标记线不为legend

option = {
xAxis: {
type: 'category',
data: ['11n2021', '12', '01', '02', '03n2022', '04', '05'],
axisLabel:{
formatter:function(val, index) {
let len=val.length
if(len>2){
let year=val.slice(3,len)
let month=val.slice(0,2)
return `${month}n{y|${year}}`
}
return val
},
rich:{
y:{
fontSize:'20px'
}
}
}
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true,
markLine: {
// yAxisIndex: 0,
symbol:'none',//去掉箭头
data:[
{xAxis:1,lineStyle:{color:'red',type:'dotted'},label:{color:'orange',formatter:'2021'}},
{xAxis:2,lineStyle:{color:'red',type:'dotted'},label:{color:'orange',formatter:'2022'}},
]
}
},
]
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mgGYbBea-1638770285396)(C:UsersPertAppDataRoamingTyporatypora-user-imagesimage-20211206135742151.png)]

最后

以上就是体贴红牛为你收集整理的echats设置辅助线的全部内容,希望文章能够帮你解决echats设置辅助线所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(52)

评论列表共有 0 条评论

立即
投稿
返回
顶部