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, ...
随机推荐
- vscode自定义vue模板代码
File--->preference -->user Snippets-->搜索html.json 编辑 加入以下自定义代码内容 "Html5-Vue": { & ...
- maven pom项目的dependencies转gradle格式
1.新建一个文件件 2.创建pom.xm,放到新建的文件夹中 3.在命令行切换到新建文件夹中,执行: gradle init --type pom
- CSS选择器[attribute | = value] 和 [attribute ^ = value]的区别
前言 首先你需要知道[attribute | = value] 和 [attribute ^ = value] 分别是什么? ①:[attribute | = value] ②:[attribute ...
- EntityFrameworkCore 学习笔记之示例一
直接贴代码了: 1. Program.cs using Microsoft.EntityFrameworkCore; using System; using System.Threading.Task ...
- mysql快速安装教程详解
Mysql 一.在https://www.cnblogs.com/zyx110/p/10799387.html中下载如下图中的压缩包 二.将mysql压缩包解压至c盘根目录下 三.把配置文件中的东西复 ...
- Asp.Net真分页技术
最近学校要做课题,闲来没事研究了下Asp.net的分页,我使用Repeater进行数据的绑定,每次从数据库读取到8条数据填充到Repeater中,这样搞可以降低数据库的压力,提高效率. 效果图如下: ...
- 基于log4net的日志组件扩展封装,实现自动记录交互日志 XYH.Log4Net.Extend(微服务监控)
背景: 随着公司的项目不断的完善,功能越来越复杂,服务也越来越多(微服务),公司迫切需要对整个系统的每一个程序的运行情况进行监控,并且能够实现对自动记录不同服务间的程序调用的交互日志,以及通一个服务或 ...
- C# 调用腾讯即时通信 IM
IM SDK API 概述 https://cloud.tencent.com/document/product/269/33543 /// <summary> /// IM SDK 初始 ...
- CSS3 transform 属性(2D,3D旋转)
一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...
- vue学习指南:第六篇(详细) - Vue的组件 component
1. 什么是组件?有两种解释 1. 第一种解释: 什么是组件? 1. 组件是 vue 中的一个可复用的实例,所以new Vue() 是vue中最大的那个组件(根组件),有名字,使用的时候以单标签或双标 ...