chartjs图表宽高度自适应怎么解决

win7的系统：右键单击计算机--------属性------点击左边“高级系统设置”------寻高级”中的“性能”里的“设置”------找到“在窗口和按钮上使用视觉样式”，将前面的勾选去掉------应用确定即可。 不过本人不建议取消此项，因为它能影响美化效果！

yAxis中先设置 minInterval : 1, 再设置 boundaryGap : [ 0, 0.1 ],

boundaryGap是坐标轴两端空白策略，数组内数值代表百分比，

[原始数据最小值与最终最小值之间的差额，原始数据最大值与最终最大值之间的差额]。比如，你数据是范围是0-120（最小值0，最大值120），那么，[0.5,

1]就表示，在最小值下方扩展50%的空间，在最大值上方扩展100%空间，也就是范围是[0 - 50% * (120 - 0), 120 +

100% * (120 - 0)]即y轴最小坐标为-60，最大坐标为240。

DIV部分

<chart

  ref="taskChart"

  :theme="charts.theme"

  autoresize :options="charts.optionsu"

  @click="zydwclick"

  :style="{width:charts.width,height:charts.height}">

</chart>

<iframe width="100%" ref="mapIframe" class="rectCorner" id="zykhMapIframe" scrolling="no"

        :src="YZKH_URL" :height="ifram_height"

        frameborder="0">

</iframe>

data部分

charts:{

//div的高度

ifram_height:0,

//echarts的高度宽度

width:'100%',

height:"230px",}

//自动设置chart的高度

methods: {

RowResize() {

let me =this

  const deviceHeight = document.documentElement.clientHeight

  const chartHeight = (Number(deviceHeight) *0.82) /2//两个row

//计算echarts 的高度

  me.charts.height = chartHeight +'px'

//计算div部分的高度

  me.ifram_height = (Number(deviceHeight) *0.78) +'px'

},

在mountd里面调用

mounted() {

let me =this

me.RowResize()

//监视窗口发生变化再调用一次

window.onresize =function () {

me.RowResize()

}

获取DOM的高度宽度公式

DOM可视高度/DOM最长的高度=计算比例

计算  table高度 

<Table border

      @on-sort-change="onSortChange"

      :columns="tableA.tableColumns"

      :data="tableA.tableData"

      :height="height"

      ref="currentRowTable"

      :percent="percent"

      style="white-space: nowrapword-break: keep-all"

></Table>

data() {

return {

height:100,

//自动设置列表的高度

RowResize() {

let me =this

  const deviceHeight = document.documentElement.clientHeight

  if (me.$refs.currentRowTable) {

me.height = Number(deviceHeight) *0.65

  }

},

let me =this

me.RowResize()

//监听窗口大小变化

window.onresize =function () {

me.RowResize()

}

---