代码示例:

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. angular修改端口号port

    报错:Port 4200 is already in use. Use '--port' to specify a different port. 因为4200端口已被使用,请使用“--port”修改 ...

  2. TensorFlow函数: tf.stop_gradient

    停止梯度计算. 在图形中执行时,此操作按原样输出其输入张量. 在构建计算梯度的操作时,这个操作会阻止将其输入的共享考虑在内.通常情况下,梯度生成器将操作添加到图形中,通过递归查找有助于其计算的输入来计 ...

  3. java架构之路(mysql底层原理)Mysql之Explain使用详解

    上篇博客,我们详细的说明了mysql的索引存储结构,也就是我们的B+tree的变种,是一个带有双向链表的B+tree.那么我今天来详细研究一下,怎么使用索引和怎么查看索引的使用情况. 我们先来简单的建 ...

  4. RFC的远程调用-异步

    接上篇RFC的远程调用-同步(https://www.cnblogs.com/BruceKing/p/11169930.html). TABLES:USR21. DATA:A TYPE USR21-P ...

  5. C#开发自动照片(图片)裁剪(缩放)工具

    1.需求分析 用winform窗体程序,开发一个能够自动.批量对图片进行缩放和裁剪的程序. 原本想直接从网上找类型的工具直接用,但是无奈现在网上能找到的工具,要么不能用,要么就是很 恶心的下载完后还有 ...

  6. vue 脚手架搭建步骤!

    ========================================================== 说出来都是泪,最开始都不知道从哪里开始(回头一看还是很简单的,关键是要找到入口)  ...

  7. ORACLE 求和(多列)

    SELECT SUM(列名),SUM(列名),SUM(列名),SUM(列名) FROM 表名

  8. annyconnect掉线之后重新链接

    sudo service vpnagentd restart /opt/cisco/anyconnect/bin/vpnui 重启服务+重新登录 deepin的优点之一是它的程序不会安装到各个角落里, ...

  9. 深入浅出《设计模式》之简单工厂模式(C++)

    前言 模式介绍 简单工厂模式其实并不属于GoF23(23种设计模式),更类似工厂模式的一种变型.其定义是可以根据参数的不同返回不同类的实例.简单工厂模式专门定义一个类来负责创建其他类的实例,被创建的实 ...

  10. Qt固定窗口大小

    指定大小 this->setMaximumSize(250, 250); 默认大小 this->setMaximumSize(this->width(), this->heig ...