一开始小程序echarts 出不来

[aslkami]

场景：

不想每次都引入 echarts，就又封装了一层,

环境：

• 调试库 2.25.3
• 开发者工具 1.05.2203070
• Taro3.4
• ehcarts 5.3.2
• TS

问题

1. 封装之后 ，option 通过一层层的传递，初始化 option为 空对象{}， 后面拿到值之后，页面不刷新，不展示 echarts
2. 我是在子组件用的，isPage 其实应该没多大关系，然而我给自己封装的 组件加上 key 和 isPage=false， 有些生效，有些不生效
3. dataZoom 和 toolTip 在模拟机上不生效，真机还没测试（已定制化内容加上了功能）

[qiuweikangdev]

子组件的话，设置isPage为false试试

[aslkami]

子组件的话，设置isPage为false试试

我设置了 false 不生效，单独设置key 不生效，要同时设置才生效
另外发现， key如果是静态编译的 就不会一开始生效，如果是动态的才会生效
例如，如果我把 key 设置为 Math.random() ，isPage=false，就都生效可以出来了

[aslkami]

场景：

父组件调用接口，获取数据，initOption = {}，孙子组件用到 自己封装的 EchartComponent, 传递数据 和 option，初始化页面不生效,， 接口调用成功返回数据后，重新 setOption 页面不出来，但是当我改变查询条件调用接口，重新设置 option 就可以出来了

[aslkami]

子组件的话，设置isPage为false试试

我打错了哈，是设置的 为 false

[aslkami]

还有问一下大佬，如何处理 display: none 的问题？ 在 pc 我是自己封装 加个 依赖，如果当前展示为true 就重新执行 resize 方法

[qiuweikangdev]

场景：

父组件调用接口，获取数据，initOption = {}，孙子组件用到 自己封装的 EchartComponent, 传递数据 和 option，初始化页面不生效,， 接口调用成功返回数据后，重新 setOption 页面不出来，但是当我改变查询条件调用接口，重新设置 option 就可以出来了

有主要的代码看看吗，看看你是怎么设置setOption

[qiuweikangdev]

还有问一下大佬，如何处理 display: none 的问题？ 在 pc 我是自己封装 加个 依赖，如果当前展示为true 就重新执行 resize 方法

需要设置display: none？ 你这个是什么场景需要这样呢

[aslkami]

场景：
父组件调用接口，获取数据，initOption = {}，孙子组件用到 自己封装的 EchartComponent, 传递数据 和 option，初始化页面不生效,， 接口调用成功返回数据后，重新 setOption 页面不出来，但是当我改变查询条件调用接口，重新设置 option 就可以出来了

有主要的代码看看吗，看看你是怎么设置setOption

因为是在虚拟桌面写的代码无法复制出来，大概是这样

function Grandfather() {
  const [options, setEchartsOptions] = useState({})

  useEffect(() => {}, [
    fetchData().then(res => {
      setEchartsOptions(res.options);
    })
  ])

  return (
    <View>
      {/* father 组件 memo 了一下 */}
      <Fahter option={options}/>
      {/* ...其他组件 */}
    </View>
  );
}

function Father({ ...args }) {
  return (
    <GrandSon {...args} isPage={false}/>
    {/* ...其他组件 */}
  )
  
}

function GrandSon({ ...args }) {
  return (
    <Echarts
      style={{ width: "100%", height: "100%" }}
      echarts={echartjs}
      {...args}
    ></Echarts>
  );
}

接口获取的 option 透传到 孙子组件里，当前元素是 display:block的有宽度高度， 但是初始化失败，无法展示 ehcarts，数据和配置项都打印的出来有值

[aslkami]

还有问一下大佬，如何处理 display: none 的问题？ 在 pc 我是自己封装 加个 依赖，如果当前展示为true 就重新执行 resize 方法

需要设置display: none？ 你这个是什么场景需要这样呢

有3个 tab ，切换会有不同的数据，对应3个不同的 echarts，激活某个 tab 那个页面 display: block, 其他 display: none， 这样初始化的时候不是没法渲染吗？因为高度宽度都是继承父级的

[qiuweikangdev]

还有问一下大佬，如何处理 display: none 的问题？ 在 pc 我是自己封装 加个 依赖，如果当前展示为true 就重新执行 resize 方法

需要设置display: none？ 你这个是什么场景需要这样呢

有3个 tab ，切换会有不同的数据，对应3个不同的 echarts，激活某个 tab 那个页面 display: block, 其他 display: none， 这样初始化的时候不是没法渲染吗？因为高度宽度都是继承父级的

这个可以这样来控制，这样每次切换tab，都会重新渲染，这样就不需要手动再执行resize

oneTabKey && <Echarts/>
twoTabKey && <Echarts/>

[qiuweikangdev]

场景：
父组件调用接口，获取数据，initOption = {}，孙子组件用到 自己封装的 EchartComponent, 传递数据 和 option，初始化页面不生效,， 接口调用成功返回数据后，重新 setOption 页面不出来，但是当我改变查询条件调用接口，重新设置 option 就可以出来了

有主要的代码看看吗，看看你是怎么设置setOption

因为是在虚拟桌面写的代码无法复制出来，大概是这样

function Grandfather() {
  const [options, setEchartsOptions] = useState({})

  useEffect(() => {}, [
    fetchData().then(res => {
      setEchartsOptions(res.options);
    })
  ])

  return (
    <View>
      {/* father 组件 memo 了一下 */}
      <Fahter option={options}/>
      {/* ...其他组件 */}
    </View>
  );
}

function Father({ ...args }) {
  return (
    <GrandSon {...args} isPage={false}/>
    {/* ...其他组件 */}
  )
  
}

function GrandSon({ ...args }) {
  return (
    <Echarts
      style={{ width: "100%", height: "100%" }}
      echarts={echartjs}
      {...args}
    ></Echarts>
  );
}

接口获取的 option 透传到 孙子组件里，当前元素是 display:block的有宽度高度， 但是初始化失败，无法展示 ehcarts，数据和配置项都打印的出来有值

你这个在h5可以正常显示吗

[aslkami]

还有问一下大佬，如何处理 display: none 的问题？ 在 pc 我是自己封装 加个 依赖，如果当前展示为true 就重新执行 resize 方法

需要设置display: none？ 你这个是什么场景需要这样呢

有3个 tab ，切换会有不同的数据，对应3个不同的 echarts，激活某个 tab 那个页面 display: block, 其他 display: none， 这样初始化的时候不是没法渲染吗？因为高度宽度都是继承父级的

这个可以这样来控制，这样每次切换tab，都会重新渲染，这样就不需要手动再执行resize

oneTabKey && <Echarts/>
twoTabKey && <Echarts/>

这样也可以，就是考虑到首页加载，性能的问题，这个是其次 主要还是上面那个问题

[aslkami]

场景：
父组件调用接口，获取数据，initOption = {}，孙子组件用到 自己封装的 EchartComponent, 传递数据 和 option，初始化页面不生效,， 接口调用成功返回数据后，重新 setOption 页面不出来，但是当我改变查询条件调用接口，重新设置 option 就可以出来了

有主要的代码看看吗，看看你是怎么设置setOption

因为是在虚拟桌面写的代码无法复制出来，大概是这样

function Grandfather() {
  const [options, setEchartsOptions] = useState({})

  useEffect(() => {}, [
    fetchData().then(res => {
      setEchartsOptions(res.options);
    })
  ])

  return (
    <View>
      {/* father 组件 memo 了一下 */}
      <Fahter option={options}/>
      {/* ...其他组件 */}
    </View>
  );
}

function Father({ ...args }) {
  return (
    <GrandSon {...args} isPage={false}/>
    {/* ...其他组件 */}
  )
  
}

function GrandSon({ ...args }) {
  return (
    <Echarts
      style={{ width: "100%", height: "100%" }}
      echarts={echartjs}
      {...args}
    ></Echarts>
  );
}

接口获取的 option 透传到 孙子组件里，当前元素是 display:block的有宽度高度， 但是初始化失败，无法展示 ehcarts，数据和配置项都打印的出来有值

你这个在h5可以正常显示吗

这个我没试过呢，不做h5，只做小程序

[aslkami]

刚刚试了一下 跑h5， 因为api不兼容，好多报错，没法查看😳

[aslkami]

测试了一下好像是是因为异步数据的问题， tripleDefer 这个不知道为什么要那么多 setimeout, 当我给初始化数据 设置

setTimeout(() => {
   setOptions()  
}, 2000)

这样初始化就可以出来

然后刚刚装了最新的 1.1.3 版本，tooltip 好像不支持自定义 formatter

[qiuweikangdev]

不能渲染 html 标签，renderMode](https://echarts.apache.org/zh/option.html#tooltip.renderMode) 设为 'richText' 然后用富文本形式实现样式。只能是这样了

[aslkami]

不能渲染 html 标签，renderMode](https://echarts.apache.org/zh/option.html#tooltip.renderMode) 设为 'richText' 然后用富文本形式实现样式。只能是这样了

好的 谢谢大佬我研究一下