superset1.3.2接入echarts图表:mix-line-bar

汤姆林_Tom

已于 2023-02-09 09:54:33 修改

阅读量2k

点赞数 1

文章标签： echarts 前端 javascript react typescript

于 2022-03-11 10:40:21 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45308101/article/details/123417736

版权

superset和echarts版本

superset:1.3.2
echarts:5.3.1

集成echarts柱状折线图 mix-line-bar

前端目录 superset-frontend

本文主要是做superset1.3.2版本接入echarts5.3.1图表的流程，之前借鉴一位前辈superset0.36版本的图表接入，但因版本跨度较大，有些地方需要修改，然后算是对原文章的转载更新，0.36版本superset前辈写的原博客链接已放到文章下方。

主要修改的部分

1、superset-frontend/src/visualizations/ 目录下

1-1、新增文件夹MixLineBar（为该图表组件的文件夹）

文件的目录结构：
在这里插入图片描述

1-2、新建文件夹images放入新增图表的图片

图片为页面上的列表缩略图
在这里插入图片描述

1-3、新增文件 MixLineBarChartPlugin.js


import transformProps from './transformProps';
import thumbnail from './images/thumbnail.png';
import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
// import controlPanel from './controlPanel';

const metadata = new ChartMetadata({
    name: t('Mix Line Bar'),
    description: '这个是新添加的',
    credits: ['https://www.echartsjs.com/examples/en/editor.html?c=mix-line-bar'],
    thumbnail,
    useLegacyApi: true
});

export default class MixLineBarChartPlugin extends ChartPlugin {
    constructor() {
        super({
            metadata,
            transformProps,
            loadChart: () => import('./ReactMixLineBar.js'), // 前端渲染逻辑
        });
    }
}

1-4、新增文件 ReactMixLineBar.js 注册

import { reactify } from '@superset-ui/core';
import Component from './MixLineBar';
export default reactify(Component);

1-5、新增文件 transformProps.js 前端后端数据转换

export default function transformProps(chartProps) {
    const { width, height, queryData, formData } = chartProps;
    // formData 前端页面的数据
    // queryData  后端返回的数据
    return {
        data: queryData.data,
        width,
        height,
        formData,
        legend: queryData.data.legend,
        x_data: queryData.data.x_data,
        series: queryData.data.data,
    };
}

1-6、新增文件 MixLineBar.js 前端渲染图表主要逻辑

import echarts from 'echarts';
import d3 from 'd3';
import PropTypes from 'prop-types';
import { CategoricalColorNamespace } from '@superset-ui/core/';

// 数据类型检查
const propTypes = {
    data: PropTypes.object,
    width: PropTypes.number,
    height: PropTypes.number,
};

function MixLineBar(element, props) {

    const {
        width,
        height,
        data,
        formData,
        x_data,
        series,
        legend,
    } = props; // transformProps.js 返回的数据

    const fd = formData
    // 配置y轴显示信息
    const left_y_min = fd.leftYMIn
    const left_y_max = fd.leftYMax
    const left_y_interval = fd.leftYInterval
    const right_y_min = fd.rightYMin
    const right_y_max = fd.rightYMax
    const right_y_interval = fd.rightYInterval
    // y轴别名
    const y_axis_label = fd.yAxisLabel
    const y_axis_2_label = fd.yAxis2Label

    // 右边y轴 对应的 指标列
    const right_y_column = fd.rightYColumn
    // 为了适配颜色
    const colorFn = CategoricalColorNamespace.getScale(fd.colorScheme);
    var colors = []
    if (colorFn && colorFn.colors) {
        colors = colorFn.colors
    }
    const colors_len = colors.length

    // y轴配置格式
    var yAxis_1 = {
        type: 'value',
        name: 'Left_Y_Axis',
        axisLabel: {
            formatter: '{value}'
        }
    }

    var yAxis_2 = {
        type: 'value',
        name: 'Right_Y_Axis',
        axisLabel: {
            formatter: '{value}'
        }
    }

    if (left_y_min !== undefined) {
        yAxis_1['mix'] = left_y_min
    }
    if (left_y_max != undefined) {
        yAxis_1['max'] = left_y_max
    }
    if (left_y_interval != undefined) {
        yAxis_1['interval'] = left_y_interval
    }
    if (right_y_min != undefined) {
        yAxis_2['mix'] = right_y_min
    }
    if (right_y_max != undefined) {
        yAxis_2['max'] = right_y_max
    }
    if (right_y_interval != undefined) {
        yAxis_2['interval'] = right_y_interval
    }
    if (y_axis_label != undefined) {
        yAxis_1['name'] = y_axis_label
    }
    if (y_axis_2_label != undefined) {
        yAxis_2['name'] = y_axis_2_label
    }

    // 处理series 显示的数据 [{'name':xx, 'type':xx, 'data':xx, 'yAxisIndex':xx}]
    // 重新请求时, 默认展示左y，
    for (let i = 0; i < series.length; i++) {
        var serie = series[i]
        serie['yAxisIndex'] = 0
        if (right_y_column != undefined && right_y_column.indexOf(serie.name) >= 0) {
            serie['yAxisIndex'] = 1
        }
        if (colors_len > 0) {
            serie['itemStyle'] = {
                'color': colors[i % colors_len]
            }
        }
    }


    const div = d3.select(element);
    const sliceId = 'mix-bar-line-' + fd.sliceId;
    const html = '<div id=' + sliceId + ' style="height:' + height + 'px; width:' + width + 'px;"></div>';
    div.html(html);
    // init echarts，light 为制定主题，可以查看官方api

    var myChart = echarts.init(document.getElementById(sliceId), 'light');
    // echarts 渲染图表的数据格式 在官网可以查看

    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data: legend, //[] x轴的数据
        },
        xAxis: [
            {
                type: 'category',
                data: x_data,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            yAxis_1,
            yAxis_2,
        ],
        series: series,

    };

    myChart.setOption(option);
}

MixLineBar.displayName = 'Mix Line Bar';
MixLineBar.propTypes = propTypes;

export default MixLineBar;

2、修改 superset-frontend/src/visualizations/presets/MainPreset.js

// 开头导入
import MixLineBarChartPlugin from '../MixLineBar/MixLineBarChartPlugin'

// 末尾添加
new MixLineBarChartPlugin().configure({ key: 'mix_line_bar' }),

3、修改 superset-frontend/src/explore/components/controls/VizTypeControl.jsx

 //找到 DEFAULT_ORDER 这个变量 数组末尾 添加 新图表
 'mix_line_bar',

4、新增 superset-frontend/src/explore/controlPanels/MixLineBar.js

前端页面布局

/**
 *   https://www.echartsjs.com/examples/zh/editor.html?c=mix-line-bar
 *   mix line bar
 */
import { t } from '@superset-ui/core';


export default {
    requiresTime: true,
    controlPanelSections: [
        {
            label: t('Chart Options'),
            expanded: true,
            controlSetRows: [
                ['color_scheme', 'label_colors'],
            ],
        },

        {
            label: t('X Axis'),
            expanded: true,
            controlSetRows: [
                ['groupby'],
            ],
        },
        {
            label: t('Line Type'),
            expanded: true,
            controlSetRows: [
                ['line_metrics'],
            ],
        },
        {
            label: t('Bar Type'),
            expanded: true,
            controlSetRows: [
                ['bar_metrics'],
            ],
        },
        {
            label: t('Real Y Axis 2 Display Columns'),
            expanded: true,
            controlSetRows: [
                ['right_y_column'],
            ],
        },

        {
            label: t('Y Axis 1 Scale Value Setting'),
            expanded: true,
            controlSetRows: [
                ['left_y_min', 'left_y_max', 'left_y_interval'],
                ['y_axis_label']
            ],
        },
        {
            label: t('Y Axis 2 Scale Value Setting'),
            expanded: true,
            controlSetRows: [
                ['right_y_min', 'right_y_max', 'right_y_interval'],
                ['y_axis_2_label']
            ],
        },
        {
            label: t('Query'),
            expanded: true,
            controlSetRows: [
                ['adhoc_filters'],
            ],
        },

    ],
    controlOverrides: {

    },
};

5、修改 superset-frontend/src/explore/controls.jsx 新增的一些自定义组件

  line_metrics: {
    ...metrics, // 继承
    multi: true, // 多选
    clearable: true, // 是否可调用， true当作sql
    validators: [], // 是否可以为空
    label: t('Line Type Metrics'),
    description: t('Metrics for which line type are to be displayed'),
  },

  bar_metrics: {
    ...metrics,
    multi: true,
    clearable: true,
    validators: [],
    label: t('Bar Type Metrics'),
    description: t('Metrics for which bar type are to be displayed'),
  },

  y_metrics_2: {
    ...metrics, 
    multi: true,
    validators: [],
    default:null,
    label: t('Y Axis 2 Columns'),
    description: t('Select the numeric columns to display in Right-Y-Axis'),
  },
    left_y_min: {
    type: 'TextControl', //文本输入
    label: t('Left Y Min'),
    renderTrigger: true,
    isInt: true,
    description: t('Left Y Min'),
  },
  left_y_max: {
    type: 'TextControl',
    label: t('Left Y Max'),
    renderTrigger: true,
    isInt: true,
    description: t('Left Y Max'),
  },
  left_y_interval: {
    type: 'TextControl',
    label: t('Left Y Interval'),
    renderTrigger: true,
    isInt: true,
    description: t('Left Y Interval'),
  },
  right_y_min: {
    type: 'TextControl',
    label: t('Right Y Min'),
    renderTrigger: true,
    isInt: true,
    description: t('Right Y Min'),
  },
  right_y_max: {
    type: 'TextControl',
    label: t('Right Y Max'),
    renderTrigger: true,
    isInt: true,
    description: t('Right Y Max'),
  },
  right_y_interval: {
    type: 'TextControl',
    label: t('Right Y Interval'),
    renderTrigger: true,
    isInt: true,
    description: t('Right Y Interval'),
  },
  y_axis_2_label: {
    type: 'TextControl',
    label: t('Y Axis 2 Label'),
    renderTrigger: true,
    default: '',
  },
  
 right_y_column: {
    type: 'SelectControl',
    freeForm: true,
    renderTrigger: true,
    multi: true,
    label: t('Y Axis 2 Column'),
    description: t('Choose or add metrics (label) to display in right y axis'),
  },

6、修改 superset-frontend/src/setup/setupPlugins.ts

// 开头引入
import MixLineBar from '../explore/controlPanels/MixLineBar';

// 末尾注册
.registerValue('mix_line_bar', MixLineBar)

7、修改package.json

"echarts": "^5.3.1"

以上为前端修改增加部分，后端可参考下方原博客