superset版本：0.28

echarts版本：3.8.5

这篇我们来到Basic Line chart的集成，这之前安装各种软件巴拉巴拉的不再赘述，可以去我上一篇查看哦。
之所以写集成Basic Line chart是因为这小伙一直报错，困扰了我好几天┭┮﹏┭┮，接下来详细介绍一下我是如何一步步驯服它的。

集成基本线图

依旧是那五个步骤，以及基本的四个文件，划重点：还有专为线图要更改的神秘文件（就是因为没改这个file，让我多日郁郁寡欢）

导入图片，把基本线片echarts_line_basic.png放入superset/static/assets/images/viz_thumbnails/文件夹下（图片戳这里，太好看了有木有！）
ecahrts官网上下载echarts.js包，放到 superset/static/assets/src/exploer中，再把漏斗echarts_line_basic.js文件（官网下载吧）拷贝到superset/static/assets/src/visualizations目录下(注意js文件名和图要一致),这个js文件内容太~长，想要的私信我吧。
修改superset/static/assets/src/visualizations/index.js文件，在export const VIZ_TYPES里加入echarts_line_basic: 'echarts_line_basic',。
在const vizMap里加入[VIZ_TYPES.echarts_line_basic]: () => loadVis(import(/*webpackChunkName: 'echarts_line_basic' */ './echarts_line_basic.js')),
index文件至关重要哦。要不然页面显示不出基本线图的选项（记得命名不可以不一样哦）
修改superset/static/assets/src/explore/visTypes.jsx文件,在export const visTypes下加如下代码（不要烦心哦，马上完事啦~坚持就是胜利）

 echarts_line_basic: {label: t('Echarts Line Basic'),showOnExplore: true,controlPanelSections: [{label: t('GROUP BY'),controlSetRows: [['groupby'],['metrics'],['percent_metrics'],['include_time'],['timeseries_limit_metric', 'order_desc'],],},{label: t('Options'),controlSetRows: [['echarts_theme'],['graph_type'],['smooths', 'data_zoom'],]},],controlOverrides: {metrics: {validators: [],},time_grain_sqla: {default: null,},},},

重点来了，地狱空荡荡我要在此说注意代码中红框里的内容，前端页面之所以一致直报错原因就在于这个红框里的选项我们没有定义，对于一个小白来说这是致命的，一直报(ControlPanelsContainer, ) TypeError: Cannot read property 'mapStateToProps' of undefined这个错误，经过漫长的调试终于是知道具体原因了┭┮﹏┭┮。

我们找到superset/static/assets/src/explore/controls.jsx文件，打开它在里面定义红框里这几个选项。在export const controls = {里加入如下代码

    smooths: {type: 'CheckboxControl',label: t('Line Smooth'),default: true,},data_zoom: {type: 'CheckboxControl',label: t('Data Zoom'),default: false,},graph_type: {type: 'SelectControl',label: t('Graph Type Select'),choices: [['Basic', 'Basic'],['Stack', 'Stack'],['StackArea', 'StackArea'],['Area Double Axis', 'Area Double Axis'],],default: 'Basic',},echarts_theme: {type: 'SelectControl',label: t('Echarts图表主题'),choices: [['default'],['dark'],['infographic'],['macarons'],['roma'],['shine'],['vintage']],description: t('echarts官方提供的六种主题，空白选项为默认值'),default: ''},

完美~~~
5. 修改superset/viz.py 加入如下代码

class EchartsLineBasicViz(BaseViz):viz_type = 'echarts_line_basic'is_timeseries = Falsedef should_be_timeseries(self):fd = self.form_dataconditions_met = ((fd.get('granularity') and fd.get('granularity') != 'all') or(fd.get('granularity_sqla') and fd.get('time_grain_sqla')))if fd.get('include_time') and not conditions_met:raise Exception(_('Pick a granularity in the Time section or '"uncheck 'Include Time'"))return fd.get('include_time')def query_obj(self):d = super(EchartsLineBasicViz, self).query_obj()fd = self.form_dataif fd.get('all_columns') and (fd.get('groupby') or fd.get('metrics')):raise Exception(_('Choose either fields to [Group By] and [Metrics] or ''[Columns], not both'))sort_by = fd.get('timeseries_limit_metric')if fd.get('all_columns'):d['columns'] = fd.get('all_columns')d['groupby'] = []order_by_cols = fd.get('order_by_cols') or []d['orderby'] = [json.loads(t) for t in order_by_cols]elif sort_by:if sort_by not in d['metrics']:d['metrics'] += [sort_by]d['orderby'] = [(sort_by, not fd.get('order_desc', True))]# Add all percent metrics that are not already in the listif 'percent_metrics' in fd:d['metrics'] = d['metrics'] + list(filter(lambda m: m not in d['metrics'],fd['percent_metrics'],))d['is_timeseries'] = self.should_be_timeseries()return ddef get_data(self, df):fd = self.form_dataif not self.should_be_timeseries() and DTTM_ALIAS in df:del df[DTTM_ALIAS]return dict(records=df.to_dict(orient='records'),columns=list(df.columns),)

6.进入superset/static/assets/package.json文件，找到一栏里添加"echarts": "^3.8.5",，关闭文件。这个文件里定义所有superset需要依赖的软件，因此运行项目之前需要将这里的软件安装上，只需在superset/static/assets目录下运行npm install即可。
编写完所有文件后在superset/static/assets下运行npm run dev 进行编译
欧了，大功告成，去运行吧，去造作吧，其他的图表都是一样的原理，O(∩_∩)O。
附图

Superset集成Basic Line Chart（二重奏:mapStateToProps）相关推荐

Apache Superset集成Echarts
一.环境准备 1.1 软件环境 npm,nodejs 二.主要步骤 2.1.添加漏斗图模型 cd venv/lib/python2.7/site-packages/supersetvi viz.py ...
R语言ggplot2可视化绘制多条基本线图（Basic line plot）、使用gghighlight包突出高亮其中的某一条线图（highlight line plot）
R语言ggplot2可视化绘制多条基本线图(Basic line plot).使用gghighlight包突出高亮其中的某一条线图(highlight line plot) 目录
数据可视化【六】Line Chart Area Chart
Line Chart vizhub代码: https://vizhub.com/Edward-Elric233/094396fc7a164c828a4a8c2e13045308 实现效果: 这里先使用 ...
用js绘制html5数值曲线,Chart.js 教程绘制曲线图（Line chart）
Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它非常简单帮你展现各种数据的图表展现形式,我们今天看看如何引入和基本的操作,并用它绘制一个制曲线图(Line chart). ...
Chartjs：Line chart的使用及必要参数说明
Web前端做月度销售额的走势图时,Chartjs是一个不错的选择,展示效果令人满意,使用方法也很简单. 展示效果如下: 数据如下: ###第一步.获取数据 public void datableGoo ...
superset集成echarts--添加Line折线图
环境 Python 3.8.10 windows 10 专业版 node v16.16.0 superset1.5 一.\superset\superset-frontend\src\visuali ...
superset集成echarts
文章目录服务地址前言集成echarts 集成echarts柱状折线图 mix-line-bar 流程 1. superset-frontend/src/visualizations/ 目录下 2 ...
superset集成echarts，自定义图表开发
环境系统:centos7 python版本:3.7.6 superset版本:0.30 echarts版本:4.2.0以上说明因为一开始使用pip(安装方法)直接安装的时候,进入安装路径下没有s ...
kylin与superset集成实现数据可视化
原文地址:http://minirick.duapp.com/kylinyu-supersetji-cheng-shi-xian-shu-ju-ke-shi-hua/?utm_source=tuico ...

Superset集成Basic Line Chart（二重奏:mapStateToProps）

superset版本：0.28

echarts版本：3.8.5

集成基本线图

Superset集成Basic Line Chart（二重奏:mapStateToProps）相关推荐

最新文章

热门文章