supervons / react-native-echarts-pro

A React-Native charts based on Apache ECharts, support various charts and map.
https://supervons.github.io/react-native-echarts-pro-docs/
MIT License
216 stars 32 forks source link

期望扩展字体样式 #79

Closed NemoZhong closed 1 year ago

NemoZhong commented 1 year ago

通过extension方式插入script在html外部,会较频繁地偶现图表渲染不出来的情况,猜测是script在html外部执行顺序,或者HtmlWeb和extensionScript不是同一时间生成的导致图表绘制还没绘制完再次绘制出现的问题。

期望在htmlWeb开个口子配置script 或者 font-face自定义

定位问题图片: image

解决问题图片: image

code:

const fileName = Platform.select({
  ios: `DINCondensed-Bold.otf`,
  android: `file:///android_asset/fonts/DINCondensed-Bold.otf`,
});

// echart字体设置
const extension = [
  `
    var styles = document.createElement('style');
    styles.innerHTML = '@font-face{font-family:"DINCondensed-Bold";src:url("${fileName}");}';
    document.getElementsByTagName('head')[0].appendChild(styles);
  `,
];

<RNEChartsPro
      extension={extension}
      option={config}
      height={arcHeight}
      webViewSettings={{
        scrollEnabled: false,
      }}
  />
NemoZhong commented 1 year ago

react-native-echarts-pro【1.8.8】 react-native version【0.66.21】 react-native-webview 【11.23.0】 Platform【android】 System【11】

supervons commented 1 year ago

感谢反馈,字体问题目前已接到反馈,#78。

目前在计划中,将会在后续版本发布,敬请关注更新通知。

supervons commented 1 year ago

1.8.9 之后的版本已支持动态字体!