图表组件的高度不能调整吗？

[ploki8]

Summary 简述

如图，我像将图表的默认宽度400px调小一点，使宽度和高度一样，可是实现吗

Expect 期望结果

Reproduce 重现示例

[xiguaxigua]

在组件上设置 height 即可

<ve-line height="100px"></ve-line>

[ploki8]

我需要的效果是高度和宽度一样，因为宽度是自适应的，我试过用js调整他的父边框自适应，但是无法调整图表的高度随着宽度自适应

[xiguaxigua]

调整之后需要手动触发 echarts 的 resize 。

this.changeHeight()
this.$nextTick(_ => {
  this.$refs.chartEl.resize()
})
``

[ploki8]

你只保留height和data还有settings试一下,估计是你其他地方写错了然后报错

[RikaLuo]

我这边resize报错。引用方式是按照以下方式来的。页面报错说resize undefined. 我是将echart单独写在一个组件使用的。父级用的以下方法，求教 resize(){ this.$nextTick(_ => { this.$refs.chartEl.resize() }) }

[xiguaxigua]

this.$refs.chartEl.resize()

这里的chartEl需要定义在组件上

<ve-line ref="chartEl" />

[RikaLuo]

我在子组件引用了，但依旧报错：

[xiguaxigua]

在上面红框的地方，nextTick里面打印一下 this.$refs 和 this.$refs.chartEl 看看

[RikaLuo]

是不是我哪里写的不对啊？

[xiguaxigua]

在 mounted 中调用 resize 试试。 检查一下 resize 函数所在组件是否正确定义了 chartEl。

[RikaLuo]

修改了之后依旧报错，请问需要怎么正确定义 ChartEI？

[xiguaxigua]

贴一下父组件和子组件的整个代码吧

[RikaLuo]

子组件：

父级引用部分h红框圈出：

[RikaLuo]

@xiguaxigua 请问需要怎么修改呀？orz

[ploki8]

首先，你连需求是什么都没说清楚，如果是高度自适应的话，但是你的height已经写死700px了

[RikaLuo]

我需要的是高度跟随我的数据量的多少来自定义，我想的是：如果我能设置好一个高度的话 那么其他高度我自然就能设置了，但是因为目前设置的时候都会报错，所以我需要先解决这个报错问题才能自定义高度。我的思路是这样的

[RikaLuo]

还望指导一下我这个需要怎么修改？真的非常感谢。我的需求是做到高度根据后台数据的数量来自定义高度的。但是目前总是报错resize undefined. orz @xiguaxigua

[ploki8]

打印不出而this.$refs和this.$refs.chartEl ，那你肯定哪里写错了，我都可以打印出json出来。如果你要实现随数据量多少来改变高度 其实你可以换个逻辑，自己加个判断，通过后台数据的长度来决定height是多少px，

[xiguaxigua]

https://codesandbox.io/s/5xz4wn1l 没有重现你遇到的问题，可以将你的项目代码脱敏之后发到我的邮箱一份吗？或者用jsfiddle重现一下这个问题 @RikaLuo

[Lupeipei]

类似问题：引入ve-pie，在组件中使用：

<ve-pie
                  :data="chartData"
                  :settings="chartSettings"
                  :colors="chartColors"
                  :legend-visible="false"
                  :tooltip-visible="false"
                  height="40px" width="40px" />

设置高度，宽度为40px时，页面无法显示出饼图，按照上面的讨论，修改成：

<ve-pie
                  ref="charEl"
                  :data="chartData"
                  :settings="chartSettings"
                  :colors="chartColors"
                  :legend-visible="false"
                  :tooltip-visible="false"
                  height="40px" width="40px" />

在组件的mounted部分，设置了：

mounted:  {
 this.$refs.charEl.map(chart => { chart.resize() })
}

成功调用了resize()，但是完全无效，页面依然无法显示饼图，请问有其他解决方法？

[Lupeipei]

试了下，使用radius 和 offsetY 搞定了。

[ningqizheng]

打印不出而this.$refs和this.$refs.chartEl ，那你肯定哪里写错了，我都可以打印出json出来。如果你要实现随数据量多少来改变高度 其实你可以换个逻辑，自己加个判断，通过后台数据的长度来决定height是多少px，

容器高度是改了，但是canvas图表没有自适应

[ningqizheng]

试了下，使用radius 和 offsetY 搞定了。

求解

[fulus06]

试了下，使用radius 和 offsetY 搞定了。

求解

解决办法 ： height="180px" :settings="{radius: 60, offsetY: 100}"