Superset项目柱状图来自Echarts

首先Echarts实现柱状图数据缩放初始化默认值的效果

核心代码 

设置Datazoom 的start 和end

myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/obama_budget_proposal_2012.list.json',function (obama_budget_2012) {myChart.hideLoading();option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',label: {show: true}}},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true }}},calculable: true,legend: {data: ['Growth', 'Budget 2011', 'Budget 2012'],itemGap: 5},grid: {top: '12%',left: '1%',right: '10%',containLabel: true},xAxis: [{type: 'category',data: obama_budget_2012.names}],yAxis: [{type: 'value',name: 'Budget (million USD)',axisLabel: {formatter: function (a) {a = +a;return isFinite(a) ? echarts.format.addCommas(+a / 1000) : '';}}}],dataZoom: [{show: true,start: 80,end: 100},{type: 'inside',start: 80,end: 100},{show: true,yAxisIndex: 0,filterMode: 'empty',width: 30,height: '80%',showDataShadow: false,left: '93%'}],series: [{name: 'Budget 2011',type: 'bar',data: obama_budget_2012.budget2011List},{name: 'Budget 2012',type: 'bar',data: obama_budget_2012.budget2012List}]};myChart.setOption(option);}
);

Superset 实现过程

superset-frontend\plugins\plugin-chart-echarts\src\Timeseries\Regular\Bar\controlPanel.tsx

新增函数createDataZoomControl  && DEFAULT_FORM_DATA 新增xAxisBoundsZoom

const {logAxis,minorSplitLine,truncateYAxis,yAxisBounds,xAxisBoundsZoom,zoomable,xAxisLabelRotation,orientation,
} = DEFAULT_FORM_DATA;--------------------------------------------------
function createDataZoomControl(): ControlSetRow[] {return [[{name: 'zoomable',config: {type: 'CheckboxControl',label: t('Data Zoom'),default: zoomable,renderTrigger: true,description: t('Enable data zooming controls'),},},],[{name: 'x_axis_bounds_zoom',config: {type: 'BoundsControl',label: t('Data Zoom Axis Bounds'),renderTrigger: true,default: xAxisBounds,description: t('Bounds for the axis when Data Zoom is enabled. When left empty, the bounds are ' +'dynamically defined based on the min/max of the data. Note that ' +"this feature will only expand the axis range. It won't " +"narrow the data's extent.",),visibility: ({ controls }: ControlPanelsContainerProps) =>Boolean(controls?.zoomable?.value),},},],];
}

修改 controlPanelSections controlSetRows 的逻辑

controlSetRows: [...seriesOrderSection,['color_scheme'],...showValueSection,...createDataZoomControl(),// [//   {//     name: 'zoomable',//     config: {//       type: 'CheckboxControl',//       label: t('Data Zoom'),//       default: zoomable,//       renderTrigger: true,//       description: t('Enable data zooming controls'),//     },//   },// ],

superset-frontend\plugins\plugin-chart-echarts\src\Timeseries\types.ts

新增 xAxisBoundsZoom

export type EchartsTimeseriesFormData = QueryFormData 新增以下内容xAxisBoundsZoom: [number | undefined | null, number | undefined | null];

superset-frontend\plugins\plugin-chart-echarts\src\Timeseries\constants.ts

export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = 新增 xAxisBoundsZoom

xAxisBoundsZoom: [null, null],

核心逻辑

superset-frontend\plugins\plugin-chart-echarts\src\Timeseries\transformProps.ts

EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData }; 内容里新增以下代码
xAxisBoundsZoom,--------------------------------------------
let [minZoom, maxZoom] = (xAxisBoundsZoom || []).map(parseYAxisBound);
if ((contributionMode === 'row' || isAreaExpand) && stack) {if (minZoom === undefined) minZoom = 0;if (maxZoom === undefined) maxZoom = 100;
} else if (logAxis && min === undefined && minPositiveValue !== undefined) {minZoom = calculateLowerLogTick(minPositiveValue);
}-------------------------------------------------
dataZoom: zoomable? [{type: 'slider',// start: TIMESERIES_CONSTANTS.dataZoomStart,start: minZoom,// end: TIMESERIES_CONSTANTS.dataZoomEnd,end: maxZoom,bottom: TIMESERIES_CONSTANTS.zoomBottom,},]: [],

效果展示