https://www.cnblogs.com/cjh-strive/p/11065005.html

xAxis属性代表echarts图表的x轴设置代码如下

xAxis : [
{
type : 'category',
// type:坐标轴类型。
// [ default: 'category' ]
/*可选:
1.'value' 数值轴,适用于连续数据;
2.'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据;
3.'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度;
4.'log' 对数轴。适用于对数数据。*/
data : ['上海','北京'], //x轴下面的数据
axisTick: {
show: false, //是否显示网状线 默认为true
alignWithLabel: true
},
//用于设置x下面的字体
axisLabel:{
show:true, //这里的show用于设置是否显示x轴下的字体 默认为true
       interval:0, //可以设置成 0 强制显示所有标签。如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。
  
       textStyle:{ //textStyle里面写x轴下的字体的样式
color:'#333',
fontSize:13
}
},
axisLine:{
show:true, //这里的show用于设置是否显示x轴那一条线 默认为true
lineStyle:{ //lineStyle里面写x轴那一条线的样式
color:'#6FC6F3',
width:2, //轴线的粗细 我写的是2 最小为0,值为0的时候线隐藏
}
}
},
]

yAxis属性代表echarts图表的y轴,样式设置方式与x轴的方式是一样,就是设置的属性会有所差异

yAxis:[{
min:0, //y轴的最小值
max:100, //y轴最大值
interval:20, //值之间的间隔
//上面的三个值可以根据自己需求随意设置 不设置时会根据图中的值自动生成相应的值

type:'value',
/* type坐标轴类型:[ default: 'value' ]
    可选:1.'value' 数值轴,适用于连续数据。
    2.'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
3.'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
4.'log' 对数轴。适用于对数数据。*/
splitLine:{show:false}, //去除网状线 默认为true
//用于设置y轴的字体
axisLabel:{
show:true, //这里的show用于设置是否显示y轴下的字体 默认为true
textStyle:{ //textStyle里面写y轴下的字体的样式
color:'#333',
fontSize:13
}
},
//用于设置y轴的那一条线
axisLine:{
show:true, //这里的show用于设置是否显示y轴那一条线 默认为true
lineStyle:{ //lineStyle里面写y轴那一条线的样式
color:'#6FC6F3',
width:2, //轴线的粗细 我写的是2 最小为0,值为0的时候线隐藏
}
}
}]

echarts图表x,y轴的设置的更多相关文章

  1. highcharts设置Y轴范围及根据Y轴范围设置不同颜色

    yAxis : { title : { text : '数据' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ], min: ...

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

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

  3. echart图表中y轴小数位数过长展示效果不佳

    业务中后端返回的精密数据,小数过长,导致所有数据差距不大,在图表中显示重合为一条直线 解决方法设置echart的min属性 min: "dataMin", 但是设置了以后又出现了问 ...

  4. echarts修改X,Y轴上的颜色

     分为2.0和3.0 一.2.0 修改的代码: x轴: xAxis : [ { type : 'category', data : ['<30','30-','40-','50-','60-', ...

  5. Echarts在手机端y轴数据过大,显示不全

    解决办法: 减少y轴的margion,和格式化y轴 myChart.setOption({ ..., yAxis: { axisLabel: { margin: , formatter: functi ...

  6. Echarts 折线图y轴标签值过长 显示

    参考: https://blog.csdn.net/dandelion_drq/article/details/79270597 改变Y轴单位:https://www.cnblogs.com/cons ...

  7. echarts图表自适应,容器宽度设置为百分比,但是图表显示不全,缩到一起

    <div  id="chartContainer" style="height:100%;width:100%;"></div> cha ...

  8. 让图表的Y轴 产生几个刻度距离

    动态设置max 查看官网 写入方法 获取到你数据最大值 然后+个100

  9. HighCharts中Y轴颜色设置

    yAxis: [{ title: { text: '', style: { color: '#2EBBD9' } }, labels: { formatter: function () { retur ...

随机推荐

  1. sf-git机制

    为什么要专门写一篇关于sf科技公司的GIT管理机制呢?因为本周经历了两天的学习和考试,刚开始没在意,因为之前公司也用的GIT,所以没怎么看视频,就看了文档,练习考试时候才发现并非以前的那种git流程, ...

  2. 基于springcloud搭建项目-Hystrix篇(五)

    1.概述 (1).首先要知道分布式系统面临的问题复杂分布式体系结构中应用程序有数十个依赖关系,每个依赖关系在某些时候将不可避免的失败 (2).服务雪崩 多个服务之间相互调用的时候,假设微服务A调用微服 ...

  3. django models中字段

    AutoField:一个自动递增的整型字段,添加记录时它会自动增长.你通常不需要直接使用这个字段:如果你不指定主键的话,系统会自动添加一个主键字段到你的model.(参阅自动主键字段) Boolean ...

  4. 【python系统学习10】布尔值

    python的数据类型有好多个,前边写过字符串.整数和浮点数这三种. 本节来整理另一种简单数据类型--布尔值 布尔值(bool) 布尔值和其数据值 计算机可以用数据进行判断,若判断为真则执行特定条件中 ...

  5. 在kubernetes1.17.2上结合ceph部署efk

    简绍 应用程序和系统日志可以帮助我们了解集群内部的运行情况,日志对于我们调试问题和监视集群情况也是非常有用的.而且大部分的应用都会有日志记录,对于传统的应用大部分都会写入到本地的日志文件之中.对于容器 ...

  6. windows git pull或者push代码时弹出安全框解决办法

    目录 1.打开控制面板->凭据管理器>删除已有的git凭证 2.新增一个凭证 @ 如果报如下错误: 1.打开控制面板->凭据管理器>删除已有的git凭证 2.新增一个凭证 网络 ...

  7. ui自动化chrome文件上传操作

    web自动化,再chrome浏览器中文件上传操作

  8. 2016 Multi-University Training Contest 4 T9

    http://acm.hdu.edu.cn/showproblem.php?pid=5772 最大权闭合子图. 得到价值w[i][j]的条件是选了i,j这两个位置的字符.选择位置的i字符花费为 第一次 ...

  9. 使用vue构建一个可视化大数据平台

    使用vue全家桶以及v-charts和datav实现一个github可视化大数据界面展示,没有设计搞的原因,只能忽略设计编写一下界面, 用户只需要登录的时候填写自己github用户名.就可以看到数据展 ...

  10. NIO中的ZeroCopy

    前文提到网络IO可以使用多路复用技术,而文件IO无法使用多路复用,但是文件IO可以通过减少底层数据拷贝的次数来提升性能,而这个减少底层数据拷贝次数的技术,就叫做ZeroCopy. 操作系统层面的Zer ...