DIFY教程第八弹:Echarts可视化助手生成图表

我们希望通过 Echars 来是实现可视化的展示各种统计数据。我们通过具体的案例来给大家介绍下，具体的效果如下：

我们可以准备一个markdown的数据 然后创建一个工作流。在开始节点我们可以上传一个文件

然后是文档提取节点 然后是格式转换节点：这里我们需要把提取的文档转换为csv格式的数据

# 角色
你是一个数据整理专家，擅长数据格式的整理和合格的转换
# 数据
{{#1741943310857.text#}}
# 任务
把数据转换为csv格式

然后是参数提取器：需要从上一步中的格式转换数据中获取到csv的数据 指令

# 任务
提取csv格式的字符串

然后是通过执行一段 Python 代码生成 满足 echarts 规范的代码 代码内容是：

import csv
import json
def main(csv_string):
# 将CSV字符串分割成行
lines = csv_string.strip().split('\n')
# 使用csv模块读取数据
reader = csv.reader(lines)
# 将所有行转换为列表
data = [row for row in reader]
# 将数字字符串转换为浮点数
for row in data[1:]: # 跳过标题行
for i in range(1, len(row)):
try:
row[i] = float(row[i])
except ValueError:
pass
# 创建完整的ECharts配置
echarts_config = {
"legend": {},
"tooltip": {},
"dataset": {
"source": data
},
"xAxis": [
最后是结果的输出
{"type": "category", "gridIndex": 0},
{"type": "category", "gridIndex": 1}
],
"yAxis": [
{"gridIndex": 0},
{"gridIndex": 1}
],
"grid": [
{"bottom": "55%"},
{"top": "55%"}
],
"series": [
# 第一个网格中的折线图系列
{"type": "bar", "seriesLayoutBy": "row"},
{"type": "bar", "seriesLayoutBy": "row"},
{"type": "bar", "seriesLayoutBy": "row"},
{"type": "bar", "seriesLayoutBy": "row"},
# 第二个网格中的柱状图系列
{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},
{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},
{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},
{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},
{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},
{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1}
]
}
# 生成输出文件
output = f'```echarts\n{json.dumps(echarts_config, ensure_ascii=False)}\n```'
return {"result": output}

最后是结果的输出

{{#1741943512414.csvdata#}}
<br>
{{#1741945375879.result#}}

然后就可以测试运行了