После вступления в общество я понял, что не могу бороться с родителями, я могу бороться только с Duoduo.
Изображение эффекта:
Добавлена диаграмма echarts.
Наконец, через запрос данные объекта, которые мы получили, были отображены через добавленную диаграмму echarts.
Шаг 1: Выберите добавленную диаграмму echarts, [официальный экземпляр диаграмм]echarts.baidu.com/examples/
Я выбрал столбчатую диаграмму с накоплением: bar-y-category-stack (это английское название является последним названием соответствующей верхней ссылки, все названия диаграмм, добавленных в этой статье, называются bar-y-category-stack, потому что это удобнее добавить различать)
1.1 Создайте в папке визуализаций файл echarts_bar_y_category.js, который используется в качестве элемента конфигурации echarts.
import echarts from 'echarts';
function echartsAngularGaugeVis(slice, payload) {
const div = d3.select(slice.selector);
const sliceId = 'echarts_slice_' + slice.formData.slice_id;
const html = '<div id="main" style="width: ' + slice.width() + '' + 'px;height:' + slice.height() + 'px;">hahah</div>';
div.html(html); // reset
var myChart = echarts.init(document.getElementById('main'));
const params = payload.data;
console.log(params, 123);
var data_name = [];
var series = [];
var data_values = [];
var series_data = [];
params.forEach(function (item, index, array) {
data_name.push(item['key']);
item['values'].forEach(function (i, index, array) {
data_values.push(i['y']);
});
series_data = {
name:item['key'],
type: 'bar',
data: data_values
};
series.push(series_data)
});
var category_name = [];
params[0]['values'].forEach(function (item, index, array) {
category_name.push(item['x'])
});
const option = {
// title: {
// text: 'undefined - 无标题'
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: category_name
},
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
module.exports = echartsAngularGaugeVis;
1.2 Сохраните изображение (путь \superset\static\assets\images\viz_thumbnails)
Шаг 2: Добавьте файлы. Найдите index.js в разделе superset\static\assets\images\viz_thumbnails.
2.1 Добавьте echarts_bar_y_category: 'echarts_bar_y_category' в объект VIZ_TYPES
2.2 vizMap добавить [VIZ_TYPES.echarts_bar_y_category]: require('./echarts_bar_y_category.js'),
Шаг 3: Настройка условия запроса. Найдите файл visTypes.js в каталоге superset\static\assets\src\explore.
echarts_bar_y_category: {
label: t('Echarts Bar Y Category'), // 表的名称
showOnExplore: true,
controlPanelSections: [ // 查询条件配置参数，每个图的参数都不一样
{
label: t('Query'),
expanded: true,
controlSetRows: [
['metrics'],
['groupby'],
['columns'],
['row_limit'],
['contribution'],
],
},
{
label: t('Chart Options'),
expanded: true,
controlSetRows: [
['color_scheme'],
['show_legend', 'show_bar_value'],
['bar_stacked', 'order_bars'],
['y_axis_format', 'y_axis_label'],
['show_controls', null],
],
},
{
label: t('X Axis'),
expanded: true,
controlSetRows: [
['x_axis_label', 'bottom_margin'],
['x_ticks_layout', 'reduce_x_ticks'],
],
},
],
controlOverrides: {
groupby: {
label: t('Series'),
},
columns: {
label: t('Breakdowns'),
description: t('Defines how each series is broken down'),
},
},
},
Шаг 3: Внутренние данные экспортируются в внешний файл конфигурации viz.py.
class Echarts_Bar_Y_Category(DistributionPieViz):
"""A good old bar chart"""
viz_type = 'echarts_bar_y_category'
verbose_name = _('Bar Y Category')
is_timeseries = False
def query_obj(self):
d = super(Echarts_Bar_Y_Category, self).query_obj() # noqa
fd = self.form_data
if (
len(d['groupby']) <
len(fd.get('groupby') or []) + len(fd.get('columns') or [])
):
raise Exception(
_("Can't have overlap between Series and Breakdowns"))
if not fd.get('metrics'):
raise Exception(_('Pick at least one metric'))
if not fd.get('groupby'):
raise Exception(_('Pick at least one field for [Series]'))
return d
def get_data(self, df):
fd = self.form_data
row = df.groupby(self.groupby).sum()[self.metrics[0]].copy()
row.sort_values(ascending=False, inplace=True)
columns = fd.get('columns') or []
pt = df.pivot_table(
index=self.groupby,
columns=columns,
values=self.metrics)
if fd.get('contribution'):
pt = pt.fillna(0)
pt = pt.T
pt = (pt / pt.sum()).T
pt = pt.reindex(row.index)
chart_data = []
for name, ys in pt.items():
if pt[name].dtype.kind not in 'biufc' or name in self.groupby:
continue
if isinstance(name, string_types):
series_title = name
elif len(self.metrics) > 1:
series_title = ', '.join(name)
else:
l = [str(s) for s in name[1:]] # noqa: E741
series_title = ', '.join(l)
values = []
for i, v in ys.items():
x = i
if isinstance(x, (tuple, list)):
x = ', '.join([text_type(s) for s in x])
else:
x = text_type(x)
values.append({
'x': x,
'y': v,
})
d = {
'key': series_title,
'values': values,
}
chart_data.append(d)
return chart_data
Это конец! наилучшие пожелания!