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, ...
随机推荐
- WebBrowser中html元素如何触发winform事件 z
只要注册一下事件就可以了. C#代码如下: using System;using System.ComponentModel;using System.Windows.Forms; namespace ...
- 【django json.dumps 报错】 datetime.datetime is not JSON serializable
django 中,json.dumps 无法直接转译 datetime 类型的值. 找了无数方法,找到一个最优.最简洁的解决办法: json.dumps(results, indent=4, sort ...
- LeetCode 225:用队列实现栈 Implement Stack using Queues
题目: 使用队列实现栈的下列操作: push(x) -- 元素 x 入栈 pop() -- 移除栈顶元素 top() -- 获取栈顶元素 empty() -- 返回栈是否为空 Implement th ...
- Appium swipe实现屏幕滑动
在 Appium 中提供 swipe() 方法来模拟用户滑动屏幕. swipe() 实现过程 是先通过在屏幕上标记两个坐标,然后再从开始坐标移动到结束坐标. 先看下 swipe 方法定义: def s ...
- 【前端知识体系-JS相关】ES6专题系列总结
1.如何搭建ES6的webpack开发环境? 安装Node环境 node -v // 10.14.1 安装NPM环境 npm -v // 6.4.1 安装babel npm install @babe ...
- css不常用的4个选择器-个人向
①:element1.element2(给同时满足有element1和element2 2个类名的元素添加样式) <!DOCTYPE html> <html> <head ...
- jQuery 源码分析(二) 入口模块
jQuery返回的对象本质上是一个JavaScript对象,而入口模块则可以保存对应的节点的引用,然后供其它模块操作 我们创建jQuery对象时可以给jQuery传递各种不同的选择器,如下: fals ...
- 阿里云 .NET SDK Roa 和 Rpc 风格签名
阿里云 .NET SDK Roa 和 Rpc 风格的签名 Demo,适用于自己不想用其提供的SDK,想用自己组装 Roa 和 Rpc 的签名方式. Roa 和 Rpc 的签名方式主要有以下几个不同点: ...
- Delphi - OLE类实现TTS方式语音朗读
Delphi调用OLE类实现TTS方式语音朗读 直接看代码: unit uMain; interface uses Windows, Messages, SysUtils, Variants, Cla ...
- LinuxShell——变量
LinuxShell——变量 摘要:本文主要学习了Shell命令中的变量. 什么是变量 简单的说,变量就是让某一个特定字串代表不固定的内容. 变量是计算机内存的单元,其中存放的值可以改变.当Shell ...