superset4.0接入echarts

### 集成 ECharts 到 Superset 4.0 为了在 Superset 4.0 中集成 ECharts，需遵循特定的开发流程来创建自定义可视化插件。此过程涉及前端和后端两部分的工作。 #### 创建自定义可视化插件 1. **环境准备** 确保已按照官方指南成功安装并运行 Apache Superset[^2]。推荐使用 Docker 或者虚拟环境中通过 pip 安装的方式来进行开发测试。 2. **构建 ECharts 插件结构** 在 `superset-frontend/src/visualizations/plugins` 文件夹下新建一个文件夹用于存放新的图表组件代码。该目录应包含以下主要文件： - `index.ts`: 导入所有必要的模块并将它们导出给 Superset 使用。 - `plugin/index.ts`: 实现 Plugin 接口的具体逻辑。 - `transformProps.ts`: 将来自数据查询的结果转换为适合传递给 ECharts 的属性对象。 - `Chart.tsx`: React 组件负责渲染实际的 ECharts 图表实例。 ```typescript // index.ts export { default as plugin } from './plugin'; ``` ```typescript // transformProps.ts import { ChartProps, TransformPropsReturn } from '@superset-ui/core'; const transformProps = ({ formData, width, height }: ChartProps): TransformPropsReturn => ({ ...formData, width, height, }); export default transformProps; ``` ```tsx // Chart.tsx import * as echarts from 'echarts/core'; import React, { useEffect, useRef } from 'react'; import { useQueryData } from '@superset-ui/chart-data-mask'; import { getOptionFromFormData } from '../utils/getOption'; // 自定义函数获取option配置项 function EchartsBar({ formData }) { const chartRef = useRef(null); useEffect(() => { let myChart; if (chartRef.current) { myChart = echarts.init(chartRef.current); const option = getOptionFromFormData(formData); myChart.setOption(option); } return () => { if(myChart){ myChart.dispose(); } }; }, [formData]); return ( <div ref={chartRef} style={{width:'100%',height:'100%'}}></div> ); } export default EchartsBar; ``` 3. **注册新插件** 编辑 `superset-frontend/src/visualizations/types.ts` 添加新类型的声明，并将其加入到可用视图列表中。 ```diff + import EchartsPlugin from '../../plugins/Echarts/plugin'; ... + export const CHART_TYPES = [ ... + ['ECHARTS_BAR', 'ECharts Bar'], ]; ``` 最后，在项目根路径执行命令重新编译前端资源: ```bash npm run build ``` 完成上述操作之后重启服务即可看到新增加的支持 ECharts 可视化的选项。