Echarts 图表的添加
1. 引入Echarts
superset的js引用，都是用npm管理的，所以我们先要添加对Echarts的引用，很简单只需要进入/superset/assets目录下，npm运行 npm i echarts --save就可以吧Echarts 添加进superset了
npm i echarts --save
疑问
按照网上的资料，此时已经可以进行添加图表的操作，但是根据老师0.24版的代码来看，此时项目中还没有Echarts.js的静态文件，此处尚且疑问，是否还是需要手动添加？ 保留疑问手动添加静态文件至/asstes/src/explore目录下。然后在两个basic.html文件中添加引用静态文件。
{% block head_js %}
{% endblock %}
2. 添加图表的左侧配置项
图表的左侧配置项，存放在superset/assets/src/explore/visTypes.jsx文件中在常量visTypes中添加新的图表配置，比葫芦画瓢....
//echarts 基本折线
echarts_line: {
label: t('echarts basic line'),
showOnExplore: true,
controlPanelSections: [
{
label: t('Query'),
expanded: true,
controlSetRows: [
['metrics', 'series'],
['limit'],
],
},
{
label: t('Chart Options'),
controlSetRows: [
['color_scheme'],
],
},
]
},
3. 添加新图表的视图类
在/superset/viz.py中添加继承 BaseViz 类，或继承自 BaseViz 的派生类 EchartsViz（自我添加）。覆写两个比较重要的类。
- query_obj(self)
返回的数据用来生成 slice 左边的那些配置项，比如 metrics (度量指标) 或 groupby 等；query_obj 中 d 的数据来自于 form_data ，很明显就是从 UI 的 from 标签中获取到的那些表单数据，在源码中，通常被缩写为 fd 。
d = {
'granularity': granularity, # 粒度
'from_dttm': from_dttm, # 从...开始（时间）
'to_dttm': to_dttm, # 到...结束（时间）
'is_timeseries': is_timeseries, # 是否是时序（如果是，必须配置时间参数）
'groupby': groupby, # 分组依据
'metrics': metrics, # 指标、度量？指计算数值所依据的列？
'row_limit': row_limit, # 行限制，一次查出多少
'filter': filters, # 筛选条件
'timeseries_limit': limit, # 时序限制
'extras': extras, # 附加配置
'timeseries_limit_metric': timeseries_limit_metric, # 时序指标
'order_desc': order_desc, # 倒序依据
'prequeries': [], # 预查询，默认为空
'is_prequery': False, # 是否预查询，默认否
}
- get_data(self,df)
返回加载到图表中的数据，df是pandas的数据类型
# 最简的 get_data() 写法
def get_data(self,df):
df.sort_values(by=df.columns[0], inplace=True)
return df.to_dict(orient='records')
4. 添加图表js文件
与老版本不同，新版的文件存放在visualizations目录下的文件夹中，一个图表对应一个文件夹。所以，在/superset/assets/src/visualizations目录下添加新图表对应的文件夹与文件。文件内容参考Echarts官网的图表配置文件和自带的文件为参考，主要记录其中的重点内容与大致步骤。
function echartsFunnelVis(slice,payload)
其中payload,为后台传输到前端的数据，slice不知道从哪里来的似乎除了了编号没什么用。首先需要建立一个存放图表的div,切记以slice为id。然后根据Echarts文档配置图表，绑定数据，刷新图表至div。
5. 添加前后端的对应关系
前四步已经完成了大部分的工作，现在需要将前后端的文件关系进行注册。
0.26以前的版本，注册文件为visualizations/main.js
0.26以后的版本，注册文件为visualizations/index.js
格式模仿现有的注册，注意图表名称需要一一对应
6. 添加图表的缩略图
可以在Echarts官网截取对应的缩略图，吧图片大小处理为520×520,添加到superset/static/assets/images/viz_thumbnails目录下，注意图片名称需要与vistypes.js中的名称一致。
7. 最后一步 前端编译
到这里图表需要添加的内容已经全部就绪，需要npm run dev或yarn run dev 进行前端编译。编译完成后运行项目就可以看到新添加的图表了！