跳到主要内容

图表组件

echarts 服务端渲染文档：https://echarts.apache.org/handbook/zh/how-to/cross-platform/server/

ECharts 提供了两种服务器渲染, SVG 渲染或 Canvas 渲染
SVG 做服务端渲染，再用 Canvas 做客户端渲染的效果
- 因为canvas渲染涉及到dom操作相关，可能会导致在首屏无法渲染出图表
- 官网文档推荐：服务端优先考虑 SVG 渲染方案
可以考虑先使用服务端渲染快速输出首屏图表，然后等待echarts.js加载完后，重新在客户端渲染同样的图表（称为 Hydration），这样就可以实现正常的交互效果和动态改变数据了

服务端渲染无法支持的功能包括：

动态改变数据
高亮鼠标所在的数据项
点击图例切换系列是否显示
移动鼠标显示提示框
其他交互相关的功能

nuxt-echarts

nuxt-echarts的ssr支持：https://echarts.nuxt.dev/guides/ssr
支持在服务端中渲染svg图表
- 注意需要指定initOptions，初始用固定宽高度，而且是数字类型，等到客户端渲染的时候，在替换动态的宽高度
- 如果ssr首屏渲染svg时候，不指定宽高度，会导致无法渲染出图表，报错
bash
```
<svg> attribute width: Unexpected end of attribute. Expected length, "".
Error: <text> attribute transform: Expected ')', "translate(35.16 NaN)".
```
- 表示生成的 SVG 元素缺少有效的 width 、height属性

ts
const initOptions = computed(() => {
  if (process.server) {
    return { width: 600, height: 400 }  // SSR 固定
  }
  return { width: '100%', height: 400 }
})

nuxt-echarts