杭州婚恋网站建设,wordpress 不显侧边,网站设计与网页制作代码大全,金华婺城区建设局网站有时候布局太小#xff0c;使用echarts#xff0c;x轴y轴文字容易被遮挡#xff0c;怎么解决这个问题呢#xff0c;或者是未能铺满整个容器。 方法1#xff1a; 直接设置 containLabel 字段 options: { grid: { containLabel: true, },} 方法2: 间接设置#xff0c;但是… 有时候布局太小使用echartsx轴y轴文字容易被遮挡怎么解决这个问题呢或者是未能铺满整个容器。 方法1 直接设置 containLabel 字段 options: { grid: { containLabel: true, },} 方法2: 间接设置但是不那么准确自适应的页面会有问题 options: { grid: { left: 1%, right: 1%, bottom: 10%, },} 方法3同时调整4个方向 grid{} 与显示数值label同时配置 containLabel
templateview classsevenview classchart-title趋势/viewview classcharts-box v-ifchartqiun-data-chartstypecolumn:eoptseopts:chartDatachartData:echartsH5truepadding0margin0//view/view
/template
//...eopts:{grid: {top: 8%,left: -10%,right: 0%,bottom: 5%,containLabel: true},
} 问题二当前数据值比较多位时也会导致图表偏移。
解决
此问题解法
方法5与方法4结合再动态调整。
grid{}, containLabel 再加动态判断数值label长度动态调整。判断是左的数据长度了微调left的位置。增加watch观察api请求回来的数据然后判断最左右数据值长度是多少 todayCount(newValue) {console.log(|------------- todayCount, this.todayCount.money7)if (this.todayCount.money7) {let len this.todayCount.money7[1].toString().lengthconsole.log(-[${this.todayCount.money7[1].toString()}], len)// 1if (len 2) {this.eopts.grid.left -10%} else if (len 2 len 5) {this.eopts.grid.left -10%} else {this.eopts.grid.left -13%}console.log(|-----------eopts, this.todayCount.money7, this.eopts.grid)}}}
运行效果
数值为0 数值长度为5位以上
