Superset 与 ECharts 集成指南

1. 集成意义

• Superset：Apache 开源的大数据可视化平台，支持 SQL 查询、仪表盘搭建和基础图表
• ECharts：百度开源的动态图表库，提供 3D 可视化、地理信息等高级图表类型
• 集成价值：结合 Superset 的数据处理能力和 ECharts 的丰富图表类型，实现更复杂的数据可视化场景

2. 集成步骤

(1) 安装依赖

# 在 Superset 项目目录操作
pip install apache-superset echarts
npm install echarts --save  # 前端依赖

(2) 创建自定义可视化插件

在 superset-frontend/src/visualizations/plugins 新建目录 echarts：

// echarts/controlPanel.js
export default {
  controlPanelSections: [
    {
      label: 'ECharts 配置',
      controlSetRows: [
        ['echart_type'],  // 图表类型选择
        ['color_scheme'], // 配色方案
      ]
    }
  ]
}

// echarts/index.js
import { EChart } from './EChart';
import controlPanel from './controlPanel';

export default {
  controlPanel,
  loadChart: () => import('./EChart'),
  renderChart: EChart,
};

(3) 实现图表渲染逻辑

// echarts/EChart.jsx
import React from 'react';
import * as echarts from 'echarts';

export default class EChart extends React.PureComponent {
  componentDidMount() {
    this.renderChart();
  }

  renderChart = () => {
    const { data } = this.props; // 从 Superset 获取的数据
    const chart = echarts.init(this.el);
    
    const option = {
      tooltip: {},
      xAxis: { data: data.xAxis },
      yAxis: {},
      series: [{
        name: '指标',
        type: 'bar',  // 可替换为 line/pie/scatter 等
        data: data.values
      }]
    };
    
    chart.setOption(option);
  };

  render() {
    return <div ref={el => (this.el = el)} style={{ height: 400 }} />;
  }
}

3. 配置 Superset

1. 在 config.py 启用插件：

FEATURE_FLAGS = {
    "ENABLE_CUSTOM_VIZ_PLUGINS": True
}

1. 注册可视化插件：

// superset-frontend/src/visualizations/main.js
import echartsPlugin from './plugins/echarts';
registerVisualization(echartsPlugin);

4. 使用示例

1. 在 SQL Lab 执行查询：

SELECT category, SUM(sales) 
FROM sales_data 
GROUP BY category

1. 在 Explore 界面：
   • 选择可视化类型为 ECharts
   • 配置图表参数（如切换为饼图）
   • 点击 Run Query 生成图表

5. 高级功能扩展

• 动态交互：通过 ECharts 的 event 模块实现图表联动
• 地图集成：

  // 在 option 中添加
  geo: {
    map: 'china',
    roam: true
  }
  

• 实时更新：利用 WebSocket 连接实现实时数据刷新

6. 注意事项

1. 版本兼容性：确保 ECharts 版本 ≥ 5.x
2. 性能优化：大数据集使用 dataset 和 dataZoom 组件
3. 安全策略：在 config.py 配置 CSP 规则允许 ECharts 资源加载

最佳实践：将常用 ECharts 模板保存为 JSON 文件，通过 fetch() 动态加载配置，实现图表模板复用。