Superset 与 ECharts 集成指南

1. 集成原理

• Superset：Apache 开源的数据可视化平台，支持 SQL 查询和仪表板构建
• ECharts：百度开发的动态图表库，提供丰富的交互式图表类型
• 集成方式：通过 Superset 的插件系统加载 ECharts 的自定义图表组件

2. 实现步骤

(1) 环境准备

# 安装依赖
pip install apache-superset echarts
superset init

(2) 创建 ECharts 插件

在 superset/plugins 目录新建 echarts_plugin：

// viz.py
import json
from superset import app
from superset.viz import BaseViz

class EChartsViz(BaseViz):
    viz_type = "echarts"
    
    def get_data(self):
        # 转换数据为 ECharts 格式
        return {
            "xAxis": {"data": ["A", "B", "C"]},
            "series": [{"data": [12, 24, 18], "type": "bar"}]
        }

(3) 注册插件

在 config.py 添加：

ADDITIONAL_VISUALIZATIONS = [
    {
        "name": "ECharts",
        "imports": ["superset.plugins.echarts_plugin"],
        "type": "echarts"
    }
]

3. 前端配置

// 在 React 组件中引入 ECharts
import ReactECharts from 'echarts-for-react';

function EChartsRenderer({ data }) {
  const option = {
    tooltip: {},
    xAxis: { data: data.categories },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: data.values
    }]
  };
  
  return <ReactECharts option={option} />;
}

**4. 数据映射示例

假设原始数据：

{
  "products": ["手机", "电脑", "平板"],
  "sales": [1200, 800, 650]
}

转换为 ECharts 格式：

option = {
  dataset: { source: [
    ['product', 'sales'],
    ['手机', 1200],
    ['电脑', 800],
    ['平板', 650]
  ]},
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }]
}

5. 优势对比

特性	原生 Superset	ECharts 集成
图表类型	30+	100+
动态交互	基础	高级
自定义动画	❌	✔️
3D 可视化	❌	✔️
地理热力图	有限	完整支持

6. 最佳实践

1. 性能优化：

   • 使用 dataset 代替多维数组
   • 启用 dataZoom 处理大数据集

   option = {
     dataZoom: [{
       type: 'slider',
       start: 0,
       end: 50
     }]
   }
   

2. 主题适配：

   # 同步 Superset 主题色
   theme = {
     color: [getColorFromSupersetTheme()],
     backgroundColor: supersetBackground
   }
   

3. 错误处理：

   try {
     echartsInstance.setOption(option);
   } catch (e) {
     console.error('ECharts 配置错误:', e.message);
   }
   

注意：完整集成需处理安全策略，在 superset_config.py 中添加：

ENABLE_CORS = True
WTF_CSRF_ENABLED = False  # 开发环境临时禁用

此方案可在保留 Superset 数据管理能力的同时，释放 ECharts 的视觉表现力，适用于金融分析、实时监控等复杂场景。