01-图表的添加

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 %}
    <script src="{{ js_manifest('common.js') }}"></script>
    <script src="/static/assets/javascripts/explore/echarts.min.js"></script>
{% endblock %}
<!-- 至此Echarts 已经添加到了superset-->

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 进行前端编译。编译完成后运行项目就可以看到新添加的图表了！

最后编辑于：2018.12.17 11:27:57