各位大佬们，如何实现echars的渲染

[donglize521521]

能不能给写个实现echars渲染的demo

[Simon-He95]

目前ai没有规范echarts的数据类型，下面只是提供一个思路，
你完全可以自定义数据结构比如 然后自己解析吧，这个数据结构得由你们的prompt决定了,你们自己去控制类型和数据了，包括提供一个template告诉ai应该返回这样的数据，你再根据这个数据用自定义组件去拿到type 和 options对应渲染

[donglize521521]

```echarts
{
"title": {
"text": "流式更新的 ECharts 图表"
},
"tooltip": {},
"xAxis": {
"type": "category",
"data": ["第1秒", "第2秒", "第3秒", "第4秒", "第5秒", "第6秒", "第7秒"]
},
"yAxis": {
"type": "value"
},
"series": [{
"name": "实时数据",
"type": "line",
"data": [12, 28, 35, 50, 48, 60, 80],
"areaStyle": {}
}]
}
```
假如我们后台返回这样的echarts数据，我该如何匹配并利用自定义组件去渲染出来呢

[donglize521521]

import` { getMarkdown, parseMarkdownToStructure } from 'markstream-vue'

const md = getMarkdown()

const nodes = parseMarkdownToStructure('# 标题', md)
// 将 nodes 传入 <MarkdownRender :nodes="nodes" />

参考这里吗？

[Simon-He95]

这种形式就是一种code_block的类型，你可以在code_block中根据language去单独处理echarts类型的

[Simon-He95]

setCustomComponents({
  code_block: (props) => {
  const language = ...
 if(language === 'echarts'){
   return h(customEchartsComponent,props)
 }
return h(CodeBlockNode,props)
  },
})

[Simon-He95]

https://markstream-vue-docs.simonhe.me/guide/echarts.html#_1-1-create-the-echarts-component

[donglize521521]

流式渲染过程，由于json部分传入，导致JSON.parse解析报错，这种情况怎么解决好点？

[donglize521521]

[Simon-He95]

这个就是业务方面的需求了，比如你觉得有一些能够维持基本canvas渲染的属性已经有了你可以解析出来先做一次渲染，这样视图上能更快的看到内容，如果你觉得没必要可以一直加一个loading态，止到正确的parse出来再渲染

[donglize521521]

哎，不瞒你说，我第一次的解决方案就用的这个属性，但是后来发现，虽然大多时候是可以的，但是还是会出现问题，导致parse解析失败的情况。

[Simon-He95]

那这个parse失败是模型吐的json有问题还是loading的状态有问题呢...

[donglize521521]

仔细排查了下，确实是模型吐的json不稳定，有时候正常，有时候异常。

[donglize521521]

不过看之前同事写的代码，这里确实不是用JSON.parse进行解析。而是用函数的严格模式处理的， Function('"use strict";return ('+ props.node.code + ")"

[donglize521521]

哎！还是用JSON5进行解析吧，更安全些！严格模式说是存在安全风险。