首页 前端知识 【Echarts】markLine自定义位置及样式

【Echarts】markLine自定义位置及样式

2024-01-30 10:01:53 前端知识 前端哥 1031 765 我要收藏

效果:
在这里插入图片描述

1、markLine标记均值

markLine: {
data: [{ type: 'average', name: 'Avg' }]
}
复制

2、自定义markLine

markLine: {
symbol: ['none', 'arrow'], // none为标线两端的样式为无,可更改
data: [
{
silent: false,
yAxis: 50, // 警戒线位置,这个赋值为纵轴50
label: {
position: 'end', // 文字位置
formatter: '标准供给时长', //文字
color: 'green' // 文字颜色
},
lineStyle: { type: 'solid', color: 'pink', width: 3 } // 样式: 线型、颜色、线宽
}
]
}
}
复制

完整代码:

series: [
{
name: 'Rainfall',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
markLine: {
data: [{ type: 'average', name: 'Avg' }]
}
},
{
name: 'Evaporation',
type: 'bar',
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
],
markPoint: {
data: [
{ name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
{ name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
]
},
markLine: {
symbol: ['none', 'arrow'], // none为标线两端的样式为无,可更改
data: [
{
silent: false,
yAxis: 50, // 警戒线位置,这个赋值为纵轴50
label: {
position: 'end', // 文字位置
formatter: '标准供给时长', //文字
color: 'green' // 文字颜色
},
lineStyle: { type: 'solid', color: 'pink', width: 3 } // 样式: 线型、颜色、线宽
}
]
}
}
]
复制

试一试:https://echarts.apache.org/examples/zh/editor.html?c=bar1

转载请注明出处或者链接地址:https://www.qianduange.cn//article/851.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

我喜欢别人的老婆怎么办

2024-02-12 00:02:58

如何治疗hpv

2024-02-12 00:02:27

如何治疗灰指甲

2024-02-12 00:02:07

如何治疗前列腺炎

2024-02-12 00:02:42

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!