qiuweikangdev/taro-react-echarts

动态设置 Echarts 的 style 高度，图表空白，固定高度正常

Closed this issue · 4 comments

SK-ERIC commented

横向条形图，需要根据其数量来动态设置 canvas 的高度。

const [chartHeight, setChartHeight] = useState('50px')

高度设置上去了，但是图表却空白了。调用 echartsRef.current?.resize() 也不行

<Echarts
    echarts={echarts}
    option={option}
    isPage={false}
    onChartReady={(echarts) => {
      echartsRef.current = echarts
    }}
    style={{
      width: '100%',
      height: chartHeight,
    }}
  />

设置为固定高度时，可正常渲染图表：

<Echarts
    echarts={echarts}
    option={option}
    isPage={false}
    onChartReady={(echarts) => {
      echartsRef.current = echarts
    }}
    style={{
      width: '100%',
      height: chartHeight,
    }}
  />
Pcxy commented

请问这个问题解决了吗

SK-ERIC commented

请问这个问题解决了吗
@Pcxy 抱歉，刚看到。

useEffect -> chartHeight -> renderOptions

Pcxy commented

请问这个问题解决了吗
@Pcxy 抱歉，刚看到。

useEffect -> chartHeight -> renderOptions
感谢解答，我用了别的办法暂时解决了这个问题

  <Echarts
    key={`${props.height}`}
    echarts={echarts}
    option={option}
    ref={echartsRef}
    style={{ height: Taro.pxTransform(props.height)}}
    isPage={false}
  ></Echarts>
  • 👍1