keloneko的博客

echarts的x轴刻度格式化，样式优化调整

产品里绘制了大量的图表，柱状图有单轴的也有双轴的，但是双轴的图如果使用echarts默认的绘制，发现两边的坐标并没有对齐，如果绘制辅助线，会发现grid区域有大量错开的辅助线，图形整体就很乱，产品不止一次让我想办法，为此多掉了好多头发，今天就来聊聊数学的重要性，没错是数学！现象的产生当两个Y轴对应的数据差距很大，比如一个是总量，一个是占比，单纯设置两个y轴的splitNumber并不能起到将两个y轴分成同样份数的效果，因为我们设置的splitNumber只是一个建议的值，但实际绘制中echarts并

最近公司产品需要做挺多图表，用的是Vue框架，其他的细节后面再说，有一个挺大的问题：当第一打开项目，图表是正常显示的，但当刷新页面后，就会发现图表会超过当前容器。造成该现象的原因在Vue中echarts的 init 我们一般会放在钩子函数 Mounted中，以确保我们可以获取到图表容器的宽度，这样图表就会基于其父元素的宽度进行绘制mounted () { this.echart = this.$echarts.init(this.$refs.chart) this.loadEcha