Echart Ui调整小知识点

目录

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();