解决echarts图表y轴数据间隔过大的问题
echarts图表y轴数据间隔过大的问题
1、如图所示,echarts图表y轴数据间隔过大,前面几个显示正常,最后一个值变得很大,造成页面特别难看
2、解决办法:
在yAxis中axisLabel设置如下,可以根据自己的需求截取几位小数点
yAxis: { type: "value", axisLabel: { formatter:function (value, index) { return value.toFixed(2); } } }
echarts图表Y轴最小间隔值 改为1
数据可视化运用更加广泛,官方提供的组件也能支持大部分数据展示的需求;
今天这里来介绍其中一个样式功能;更改Y轴最小间隔值为1;
代码如下:
在yAxis中添加 minInterval:1,
yAxis: [ { type: 'value', minInterval:1, axisLine: { show: false, lineStyle: { type: 'solid', color: '#5A5A5A',//左边线的颜色 width: '1'//坐标线的宽度 } }, axisLabel: { textStyle: { color: '#5A5A5A',//坐标值得具体的颜色 } }, axisTick:false, splitLine: { //坐标轴在grid区域中的分隔线(网格中的横线) show: true, lineStyle: { color: ['#5A5A5A'], width: 1, type: 'dashed', } }, splitArea: {//坐标轴在grid区域中的分隔区域(间隔显示网格区域) interval: 1, //显示间隔的规律 show: true, areaStyle: {//分隔区域的样式 color: ['rgba(255,255,255,0.03)', 'rgba(255,255,255,0)'] } } } ],
效果图:
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue el使用el-checkbox-group复选框进行单选框方式
这篇文章主要介绍了Vue el使用el-checkbox-group复选框进行单选框方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10Vue.js基础之监听子组件事件v-on及绑定数据v-model学习
这篇文章主要为大家介绍了Vue.js基础之监听子组件事件v-on及绑定数据v-model学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-06-06vue/Element UI实现Element UI el-dialog自由拖动功能实现
最近工作上需要在el-dialog基础上进行些功能的改动,下面这篇文章主要给大家介绍了关于vue/Element UI实现Element UI el-dialog自由拖动功能实现的相关资料,需要的朋友可以参考下2023-06-06Vue中watch、computed、updated三者的区别及用法
这篇文章主要介绍了Vue中watch、computed、updated三者的区别及用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论