代码示例:

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轴预警线的更多相关文章

  1. echarts使用笔记四:双Y轴

    1.双Y轴显示数量和占比 app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '数量和占比图 ...

  2. highcharts图表显示鼠标选择的Y轴提示线

    tooltip: { shared: true, crosshairs: [true, false] },

  3. Echarts实现隐藏x轴,y轴,刻度线,网格

    "yAxis": [ { //就是一月份这个显示为一个线段,而不是数轴那种一个点点 "show" : true, "boundaryGap" ...

  4. 第三方工具 - echarts中 设置x||y轴文案、提示文字等为固定字数,超出显示"..."

    起初看到这种需求的时候,我是这个状态 对,我是拒绝的,人家echats画出来就是一个canvas,你让我怎么加... 但是,作为一个"有点追求的"前端,我得想招试试总结下来,唯一的 ...

  5. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

  6. 百度echarts使用--y轴label数字太长难以全部显示

    问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就 ...

  7. echarts统计图Y轴(或X轴)文字过长问题解决

    echarts 统计图Y轴文字过长 在使用echarts时,出现数值非常大,Y轴又显示不下的情况就需要压缩Y轴数值刻度. 解决方法: yAxis: { type: 'value', axisLabel ...

  8. echarts使用记录(三):x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据

    1.去掉坐标轴刻度线,刻度数据,坐标轴网格,以Y轴为例,同理X轴 xAxis: [{ type: 'category', axisTick: {//决定是否显示坐标刻度 alignWithLabel: ...

  9. echarts使用记录(二)legend翻页,事件,数据集,设置y轴最大/小值,让series图形从右侧出往左移动

    1.有时候legend比较多的时候,需要做翻页比较好,有个属性legend的type属性设置为scroll,然后animation可以控制动画,官方文档均可查. 再就是scrollDataIndex, ...

随机推荐

  1. React服务器端渲染框架next.js项目实战及部署上下文context问题解决办法

    在前段时间折腾过搭建react服务器端项目架构,点击这里了解下,正好最近有个重构PC网站的需求,考虑SEO等因素.在做技术选型的时候决定采用nextjs.项目开发过程中,nextjs的体验非常棒,个人 ...

  2. Python连载26-shelve模块

    一.持久化 --shelve 持久化工具 (1)作用:类似字典,用kv对保存数据,存取方式类似于字典 (2)例子:通过一下案例创建了一个数据库,第二个程序我们读取了数据库 #使用shelve创建文件并 ...

  3. BIM软件Revit的优点

    BIM软件Revit的优点        那么多人喜欢使用这个软件的是因为BIM软件Revit极其强大的集成性和平台性.          BIM软件Revit的集成性        建筑是一个复杂数 ...

  4. find命令常用场景

    1.查找/var目录下属主为root并且属组为mail的所有文件: find /var -user root -group mail 2.查找/usr目录下不属于root,bin,或student的文 ...

  5. tf.clip_by_value

    tf.clip_by_value(t, clip_value_min, clip_value_max, name=None) 功能:基于定义的min与max对tesor数据进行截断操作,目的是为了应对 ...

  6. idea配置热加载

    第一步:添加依赖 spring-boot项目中引入如下依赖 <dependency> <groupId>org.springframework.boot</groupId ...

  7. react 练习参考

    项目地址:https://gitee.com/dhclly/icedog.react React 练习项目 相关资源链接 React官方 https://reactjs.org React 中国 ht ...

  8. linux 修改文件的时间属性

    二.修改文件时间 创建文件我们可以通过touch来创建.同样,我们也可以使用touch来修改文件时间.touch的相关参数如下: -a : 仅修改access time. -c : 仅修改时间,而不建 ...

  9. Tomcat 简单容器化

    Tomcat 容器化 思考 问题1 , Tomcat 容器化,Tomcat 如何配置 APR 连接器 Tomcat 的基础镜像已经是开启了 APR. 问题2, Tomcat 是每次都需要重新构建. 一 ...

  10. OpenGL入门1.1:窗口

    每一个小步骤的源码都放在了Github 的内容为插入注释,可以先跳过 测试GLFW 在我们的test.cpp中加入下面两个头文件 #include <glad/glad.h> #inclu ...