echarts的markline的使用 y轴预警线
时间:2019-10-09
本文章向大家介绍echarts的markline的使用 y轴预警线,主要包括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,分为最大,最小,平均值 } ] }
原文地址:https://www.cnblogs.com/zhukaixin/p/11641652.html
- (23) 枚举的本质 / 计算机程序的思维逻辑
- (22) 代码的组织机制 / 计算机程序的思维逻辑
- Python开发微信公众号后台(系列二)
- (21) 内部类的本质 / 计算机程序的思维逻辑
- (20) 为什么要有抽象类? / 计算机程序的思维逻辑
- Python云计算框架:Openstack源码分析之RabbitMQ(一)
- (38) 剖析ArrayList / 计算机程序的思维逻辑
- 破解验证,让爬取更随心所欲!
- Visual Studio Code v0.9.1 发布
- (39) 剖析LinkedList / 计算机程序的思维逻辑
- 我的Android进阶之旅------>Android采用AES+RSA的加密机制对http请求进行加密
- 看到那个Edward 了吗?对!其实它是个Python库
- (35) 泛型 (上) - 基本概念和原理 / 计算机程序的思维逻辑
- 将linux下的rm命令改造成mv到指定的目录下
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 使用思科模拟器 Cisco Packet Tracer 模拟交换机基本配置
- IDEA 连接 SQL Sever
- Ms SQL Server 如何导入数据库
- 移动直播连麦PK快速调试
- Python:使用爬虫获取中国最好的大学排名数据(爬虫入门)
- Python:酒鬼漫步
- apache-commons-dbutils + Druid + JDBC 简单实现 CRUD
- Python:将一个 csv 文件转为 json 文件存储到磁盘
- TKE上搭建集群Dashboard
- FFmpeg+OpenSLES 实现音频播放
- 使用 JSP+Servlet 模仿京东页面实现购物车功能
- Python 绘制科赫雪花的简单实现
- IP 数据报格式详解
- 地址解析协议 ARP 详解
- IP 地址分为哪几类?