echarts的markline的使用 y轴预警线
代码示例:
app.title = '坐标轴刻度与标签对齐';
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
效果图:

主要代码:(设置预警线值,样式,文本)
markLine : {
symbol:"none",
/*symbol:"none", //去掉警戒线最后面的箭头
label:{
position:"end" , //将警示值放在哪个位置,三个值“start”,"middle","end" 开始 中点 结束
},*/
data : [{
silent:false, //鼠标悬停事件 true没有,false有
lineStyle:{ //警戒线的样式 ,虚实 颜色
type:"solid",
color:"#3398DB",
},
label:{
position:'end',
formatter:"及格(150)"
},
yAxis:150 // 警戒线的标注值,可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'},type值有 max min average,分为最大,最小,平均值
},
{
silent:false, //鼠标悬停事件 true没有,false有
lineStyle:{ //警戒线的样式 ,虚实 颜色
type:"solid",
color:"#FA3934",
},
label:{
position:'end',
formatter:"优秀(350)",
fontSize:'8'
},
yAxis:350 // 警戒线的标注值,可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'},type值有 max min average,分为最大,最小,平均值
}
]
}
echarts的markline的使用 y轴预警线的更多相关文章
- echarts使用笔记四:双Y轴
1.双Y轴显示数量和占比 app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '数量和占比图 ...
- highcharts图表显示鼠标选择的Y轴提示线
tooltip: { shared: true, crosshairs: [true, false] },
- Echarts实现隐藏x轴,y轴,刻度线,网格
"yAxis": [ { //就是一月份这个显示为一个线段,而不是数轴那种一个点点 "show" : true, "boundaryGap" ...
- 第三方工具 - echarts中 设置x||y轴文案、提示文字等为固定字数,超出显示"..."
起初看到这种需求的时候,我是这个状态 对,我是拒绝的,人家echats画出来就是一个canvas,你让我怎么加... 但是,作为一个"有点追求的"前端,我得想招试试总结下来,唯一的 ...
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
- 百度echarts使用--y轴label数字太长难以全部显示
问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就 ...
- echarts统计图Y轴(或X轴)文字过长问题解决
echarts 统计图Y轴文字过长 在使用echarts时,出现数值非常大,Y轴又显示不下的情况就需要压缩Y轴数值刻度. 解决方法: yAxis: { type: 'value', axisLabel ...
- echarts使用记录(三):x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据
1.去掉坐标轴刻度线,刻度数据,坐标轴网格,以Y轴为例,同理X轴 xAxis: [{ type: 'category', axisTick: {//决定是否显示坐标刻度 alignWithLabel: ...
- echarts使用记录(二)legend翻页,事件,数据集,设置y轴最大/小值,让series图形从右侧出往左移动
1.有时候legend比较多的时候,需要做翻页比较好,有个属性legend的type属性设置为scroll,然后animation可以控制动画,官方文档均可查. 再就是scrollDataIndex, ...
随机推荐
- 记一次SQL调优
insert优化 如果你在某一时刻有大量的insert操作,一条一条插入是非常耗时的.insert语句本身支持一次插入很多条记录,插入记录数上限受sql语句长度限制,一般一次插个几千条是没问题的.在我 ...
- CentOS7安装Oracle 11g数据库
转载:https://blog.csdn.net/lia17/article/details/82256565 rpm -ivh --force --nodeps *.rpm 强制装 rpm依赖包下载 ...
- 图解Hyperf框架:Hyperf 的初始化
- Focal Loss 理解
本质上讲,Focal Loss 就是一个解决分类问题中类别不平衡.分类难度差异的一个 loss,总之这个工作一片好评就是了. 看到这个 loss,开始感觉很神奇,感觉大有用途.因为在 NLP 中,也存 ...
- linux (centos)增删改查用户命令
1,查看用户 cat /etc/passwd 2,删除用户 userdel 用户名 3,查看组 cat /etc/group 4,删除组 groupdel 组名 5.查看系统中有哪些用户: cut - ...
- Java8新特性——Optional类的使用(有效的避免空指针异常)
OPtional类的使用 概述 到目前为止,臭名昭著的空指针异常是导致Java应用程序失败的最常见原因.以前,为了解决空指针异常,Google公司著名的Guava项目引入了Optional类,Guav ...
- WebApi安全性 参数签名校验(结合Axios使用)
接口参数签名校验,是WebApi接口服务最重要的安全防护手段之一. 结合项目中实际使用情况,介绍下前后端参数签名校验实现方案. 签名校验规则 http请求,有两种传参形式: 1.通过url传参,最常见 ...
- php 5.5 编译安装
链接:https://pan.baidu.com/s/1Iy5kdugWqmvtsrYG0WYAdA 提取码:knk9 上面的链接 php5.5.8 编译安装的包 ./configure --pre ...
- Hashtable 负载因子Load Factor
负载因子(load factor),它用来衡量哈希表的 空/满 程度,一定程度上也可以体现查询的效率,计算公式为: The ratio of the number of elements in the ...
- Java网络编程 -- Netty中的ByteBuf
由于JDK中提供的ByteBuffer无法动态扩容,并且API使用复杂等原因,Netty中提供了ByteBuf.Bytebuf的API操作更加便捷,可以动态扩容,提供了多种ByteBuf的实现,以及高 ...