superset0.36接入echarts 图表：mix-line-bar

superset和echarts版本

superset : 0.36

echarts : 4.7.0

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

前端目录 superset-frontend

首先0.36版本是比较新的版本，代码结构相比 0.30以前的改动还是比较大的，主要是前端的代码结构变化比较大， superset 把前端的插件单独放在一个superset-ui的项目中；superset中的前端代码主要放在superset-frontend的目录中

主要修改的地方

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

1-1 新增文件夹MixLineBar,

主要新加的文件目录

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

图片在echarts 上可以下载
https://www.echartsjs.com/examples/zh/index.html

选择你要接入的图表，然后右键另存为 就可以下载下来了
然后放在 images 文件下，可以转化为png

1-3 新增文件 MixLineBarChartPlugin.js

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


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

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

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

import reactify from '@superset-ui/chart/esm/components/reactify';
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/color';

// 数据类型检查
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