d3 和echart_最新版本的Superset 如何集成Echart?

一、基本环境

Superset version: 0.99

Python:3.7

Echart 4.5

二、前置技术点

React、d3、Python、Django、Notejs

三、安装开发版本Superset

3.1 windows版本

1）配置好Python、JDK环境

2）下载最新版本superset https://github.com/apache/incubator-superset

3) 切换目录 incubator-superset-0.34.0incubator-superset-0.34.0

4）开始安装：Python setup.py install

5）fabmanager create-admin --app superset

6）cd D:knowledgeresearchincubator-superset-0.34.0incubator-superset-0.34.0supersetbin

7）python superset db upgrade

8）python superset load_examples

9）python superset init

10）、执行npm install，依赖安装完成后，执行npm run dev（打包前端资源到dist目录下）

11）、flask run -p 8088 --with-threads --reload --debugger

四、集成Echart

4.1 通过命令窗口安装echart

4.2 切换目录 incubator-superset-mastersupersetviz.py 添加自定义的Viz

4.3 切换目录： incubator-supersetmastersupersetassetssrcvisualizations，创建自定义报表文件夹： 如名称为EchartYouda ，目录结构如下

---images

----------thumbnail.png

----------thumbnailLarge.png

---EchartYouda.jsx(内容根据需要自己定义)

---EchartYoudaChartPlugin.js(内容根据需要自己定义)

---transformProps.js(内容根据需要自己定义)

4.4 修改文件 incubator-superset-mastersupersetassetssrcvisualizationspresetsMainPreset.js

添加EchartYoudaChartPlugin().configure({key:'xxxxxx'})

4.5 把组件添加到控制面板，切换目录 incubator-superset-mastersupersetassetssrcexplorecontrolPanels， 添加EchartYouda.js(内容根据需要自己定义)

4.6 绑定组件 incubator-superset-mastersupersetassetssrcsetupsetupPlugins.ts，.registerValue("xxxxx",EchartYouda)

4.7 注册Echart组件完成