目录
1.X轴(Y轴)名称显示完整
2.X轴(Y轴)名称显示成省略号模式
3.将数据显示完整,不受高度或宽度挤压
答案
1.X轴(Y轴)名称显示完整
答: (当前我是X轴变Y轴的情况,如果是正常显示,请自行修改grid的方向) axisLabel: {
show: true,interval: 0,//显示完整textStyle: {
color: '#FFFFFF',fontSize: 12,lineHeight: '16px'}},grid:{
left:200// 重要!!! 有的时候是由于宽度不够,导致的名称显示不全,所以需要个调整位置},`
2.X轴(Y轴)名称显示成省略号模式
答: 被注释的代码段就是关键语句, 具体显示多少名称自行抉择,修改判断条件即可. axisLabel: {
show: true,interval: 0,// formatter: function(value) {
// return (value.length > 8 ? (value.slice(0, 8) + "...") : value)// },textStyle: {
color: '#FFFFFF',fontSize: 12,lineHeight: '16px'}
},
3.将数据显示完整,不受高度或宽度挤压
答: 页面关键代码<div :id="id" :style="{
height:autoHeight,width:'100%'}" class="xtoybar"></div>
将下列代码放入Echart初始化的方法里面即可
var dom = document.getElementById(this.id);var myChart = this.$echarts.init(dom);this.autoHeight = this.xData.length * 35 + 50; // counst.length为柱状图的条数，即数据长度。35为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。myChart.getDom().style.height = this.autoHeight + "px";myChart.getDom().childNodes[0].style.height = this.autoHeight + "px";//myChart.getDom().childNodes[0].childNodes[0].setAttribute("height",this.autoHeight);//myChart.getDom().childNodes[0].childNodes[0].style.height = this.autoHeight + "px";myChart.resize();