echarts高度自适应

271 阅读1分钟

image.png

HTML 1.jpg

Css #eachar-style{ width:100%; }

js

//初始化eacher实例

var myRowChart = echarts.init(document.getElementById('eachar-style'));

//设置自动高度

//返回数据的数组形式

let lengValue=res.data.goodsname;

//数组总长度* 每个子元素的高度

let heightauto=lengValue.length * 40 ;

//获取eacher中deom的结点 ==>getDom();

myRowChart.getDom().style.height = heightauto + "px";

myRowChart.setOption({

        title: {
            text: '购买频率'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },

      yAxis: {
            type: 'category',
            data: res.data.goodsname,
        },
      series: [{ 
             name:'总量'+lengValue.length,
             type: 'bar',
             data:res.data.numarray,
    }]
    })
    
    //自适应图表
    myRowChart.resize(); `