echarts图表x,y轴的设置
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轴的设置的更多相关文章
- highcharts设置Y轴范围及根据Y轴范围设置不同颜色
yAxis : { title : { text : '数据' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ], min: ...
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
- echart图表中y轴小数位数过长展示效果不佳
业务中后端返回的精密数据,小数过长,导致所有数据差距不大,在图表中显示重合为一条直线 解决方法设置echart的min属性 min: "dataMin", 但是设置了以后又出现了问 ...
- echarts修改X,Y轴上的颜色
分为2.0和3.0 一.2.0 修改的代码: x轴: xAxis : [ { type : 'category', data : ['<30','30-','40-','50-','60-', ...
- Echarts在手机端y轴数据过大,显示不全
解决办法: 减少y轴的margion,和格式化y轴 myChart.setOption({ ..., yAxis: { axisLabel: { margin: , formatter: functi ...
- Echarts 折线图y轴标签值过长 显示
参考: https://blog.csdn.net/dandelion_drq/article/details/79270597 改变Y轴单位:https://www.cnblogs.com/cons ...
- echarts图表自适应,容器宽度设置为百分比,但是图表显示不全,缩到一起
<div id="chartContainer" style="height:100%;width:100%;"></div> cha ...
- 让图表的Y轴 产生几个刻度距离
动态设置max 查看官网 写入方法 获取到你数据最大值 然后+个100
- HighCharts中Y轴颜色设置
yAxis: [{ title: { text: '', style: { color: '#2EBBD9' } }, labels: { formatter: function () { retur ...
随机推荐
- npm项目创建初始过程详解
npm install 就是安装模块,npm run dev 就是执行npm script中的命令.当我们执行npm命令的时候,它到哪里去找,这就要说到每个node项目中都有的核心文件package ...
- 在Tomcat上发布Web项目的方式
一. Tomcat的使用: 安装:解压压缩包即可 注意:安装目录不能有中文 目录结构: ①bin:可执行文件 ②conf:可执行文件 ③lib:依赖的jar包 ④logs:日志文件 ⑤:temp:临时 ...
- 项目团队测试改进&产品测试方法的思考和改进
七月份了,2019年已过去一半: 后半年,我们要以什么样的成果来对生命唱赞歌? 我目前负责公司一个小产品线的测试,和一个大产品线的项目测试. 产品测试,我才加入3周: 经过这段时间断断续续的磨合,我对 ...
- postman设置测试环境
有时需要我们在不同的环境下跑相同的测试,就可以通过postman设置环境 展开环境切换下拉列表,点击[Manage Environments]
- React笔记1
目录 1.react基础:类组件.函数式组件.ES5/ES6继承 2.生命周期钩子函数 3.什么是JSX 4.props和state有什么区别 5.路由配置 6.自定义封住组件 7.React 状态管 ...
- 【转】sublime text 2 快捷键大全
Ctrl+L 选择整行(按住-继续选择下行) Ctrl+KK 从光标处删除至行尾 Ctrl+Shift+K 删除整行 Ctrl+Shift+D 复制光标所在整行,插入在该行之前 Ctrl+J 合并行( ...
- GitHub 热点速览 Vol.12:不可思议的浏览器 browser-2020 周涨 star 超 3 千
作者:HelloGitHub-小鱼干 摘要:本周的 GitHub Trending 像极最近的天气,温暖如春突然来个急降温.新晋 GitHub 项目重启屈指可数的模式,好在老项目们表现甚好.比如一周就 ...
- Natas28 Writeup(ECB分组密码攻击)
Natas28: 页面显示这是一个笑话库,可以查找提交字符串所在的笑话内容并随机返回. 初步探索 burp抓包发现,流程是post表单提交一个明文后返回一个重定向,然后get请求一个加密参数返回查询结 ...
- Natas12 Writeup(文件上传漏洞)
Natas12: 文件上传页面,源码如下: function genRandomString() { $length = 10; $characters = "0123456789abcde ...
- http服务部署
[root@xiaoyi ~]# vim /etc/ssh/sshd_config 17行 Port 22 49行 PermitRootLogin yes 观察IP地址与物理机属于同一个网段 打开Fi ...