其他分享
首页 > 其他分享> > superset集成Echarts的地图并实现省市区下钻

superset集成Echarts的地图并实现省市区下钻

作者:互联网

第一步:左侧控制栏开发

查询、过滤等等条件配置配置在此文件夹中
在这里插入图片描述

/*
 * @FilePath: /biSuperset/superset-frontend/src/explore/controlPanels/EchartsMap.js
 */
import {
  t,
  // validateNonEmpty
} from '@superset-ui/translation';
import { sections } from '@superset-ui/chart-controls';

export default {
  controlPanelSections: [
    sections.legacyRegularTime,
    {
      label: t('Query'),
      expanded: true,
      controlSetRows: [
        ['groupby'],
        ['metrics'],
        ['adhoc_filters'],
        ['row_limit'],
      ],
    },
  ],
  controlOverrides: {
    groupby: {
      label: '省字段(必须与表字段省字段相匹配)',
      description: '',
      // TODO 此处需要放开
      // validators: [validateNonEmpty],
    },
    metric: {
      label: t('Metric'),
      description: '',
      // TODO 此处需要放开
      // validators: [validateNonEmpty],
    },
    time_grain_sqla: {
      default: null,
    },
  },
};

第二步:左侧栏注册

位置:explore/components/controls/VizTypeControl/VizTypeGallery
参照案例即可

'echarts_map',

第三步:右侧渲染层开发

EchartsMap.js (主要渲染文件)

/* eslint-disable array-callback-return */
import echarts from 'echarts';
// eslint-disable-next-line import/no-extraneous-dependencies
import d3 from 'd3';
import PropTypes from 'prop-types';
import 'echarts/map/js/china';
import { cityJson, provinceJson } from './map';

// TODO 待优化
// 数据类型检查
const propTypes = {
  width: PropTypes.number,
  height: PropTypes.number,
};
function EchartsMap(element, props) {
  const { width, height, data, formData } = props; // transformProps.js 返回的数据

  const div = d3.select(element);
  const sliceId = `echarts-map-${10}`;
  const html = `<div id="${sliceId}" style="height:${height}px; width:${width}px;border:1px"></div>`;
  div.html(html);

  const myChart = echarts.init(document.getElementById(sliceId));
  document.oncontextmenu = function () {
    return false;
  }; // 取消浏览器的邮件点击事件

  const groupbys = formData.groupby;
  const { metrics } = formData;
  let lab = 1;
  let dataValue = data[groupbys[0]];
  const dataName = new Set();

  function getSeries(type) {
    const result = [];
    dataName.clear();
    metrics.map(opt => {
      dataValue.map(datax => {
        if (
          datax.name === opt ||
          JSON.stringify(datax.name) === JSON.stringify(opt)
        ) {
          datax.data.map(item => {
            dataName.add(item.name);
          });
          const midx = {
            name: datax.name,
            type: 'map',
            map: type,
            selectedMode: 'single',
            roam: 'scale',
            data: datax.data,
            label: {
              normal: {
                show: true,
                textStyle: { color: '#b6a38a' },
              },
              emphasis: {
                show: true,
                textStyle: { color: '#ff6347' },
              },
            },
            itemStyle: {
              emphasis: {
                areaColor: '#2e4783',
                borderWidth: 0,
              },
            },
          };
          result.push(midx);
        }
      });
    });
    return result;
  }

  let option = {
    title: {
      subtext: '点击进入下一级,右键返回中国地图',
      x: 'center',
      bottom: '5%',
    },
    tooltip: {
      trigger: 'item',
      formatter(params) {
        let res = `${params.name}<br/>`;
        const myseries = option.series;
        for (let i = 0; i < myseries.length; i += 1) {
          for (let j = 0; j < myseries[i].data.length; j += 1) {
            if (myseries[i].data[j].name === params.name) {
              let field = myseries[i].name;
              if (typeof field === 'object') {
                field = field.column.column_name;
              }
              res += `${field} : ${myseries[i].data[j].value}</br>`;
            }
          }
        }
        return res;
      },
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {},
      },
    },
    visualMap: {
      // type: 'continuous',
      min: 0,
      max: data.max,
      text: ['高', '低'],
      realtime: false,
      calculable: true,
      // right:'-15%',
      inRange: {
        color: [
          '#d0f4fc',
          '#a9dbf6',
          '#9cd3f4',
          '#93cdf3',
          '#83c2f0',
          '#6eb5ed',
          'yellow',
        ],
      },
    },
    series: getSeries('china'),
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  // 异步加载其余地图
  provinceJson.map(item => {
    $.getJSON(
      `http://${window.document.location.host}/static/assets/echarts/province/${item.label}.json`,
      function (res) {
        echarts.registerMap(item.name, res);
      },
    );
  });

  // 用点击事件来切换地图实现下钻功能,该省份有值时才可以下钻
  myChart.on('click', function (chinaParam) {
    if (
      chinaParam.name === '香港' ||
      chinaParam.name === '澳门' ||
      chinaParam.name === '台湾' ||
      chinaParam.name === '南海诸岛'
    ) {
      return;
    }
    // TODO XXXXX
    // if (dataName.has(chinaParam.name) && lab === 1 && groupbys.length > 1) {
    if (lab === 1) {
      lab = 2;
      // dataValue = data[groupbys[1]];
      dataValue = data[groupbys[0]];
      // ! TODO 为了简易的显示图表而注释,此处可以安接口方式,走返回不同的层级的数据结构

      // let resultValue = [];
      // dataValue.map(item => {
      //     let midValue = [];
      //     item['data'].map(opt => {
      //         if (opt['key'] === chinaParam.name) {
      //             midValue.push({ 'name': opt['name'], 'value': opt['value'] })
      //         }
      //     });
      //     resultValue.push({ 'name': item['name'], 'data': midValue })
      // });

      // dataValue = resultValue;
      option = myChart.getOption();
      option.series = getSeries(chinaParam.name);
      myChart.setOption(option);
      // TODO 三级目录暂未开发,考虑到公司不需要地级县
      cityJson.map(item => {
        if (item.dep === chinaParam.name) {
          $.getJSON(
            `http://${window.document.location.host}/static/assets/echarts/citys/${item.value}.json`,
            function (res) {
              echarts.registerMap(item.name, res);
            },
          );
        }
      });
    }

    if (dataName.has(chinaParam.name) && lab === 2 && groupbys.length > 2) {
      lab = 3;
      dataValue = data[groupbys[2]];
      const resultValue = [];
      dataValue.map(item => {
        const midValue = [];
        item.data.map(opt => {
          if (opt.key === chinaParam.name) {
            midValue.push({ name: opt.name, value: opt.value });
          }
        });
        resultValue.push({ name: item.name, data: midValue });
      });

      dataValue = resultValue;
      option = myChart.getOption();
      option.series = getSeries(chinaParam.name);
      myChart.setOption(option);
    }
  });

  // 用双击事件来返回最上层的中国地图,当不在中国地图时生效
  myChart.on('contextmenu', function () {
    if (myChart.getOption().series[0].map !== 'china') {
      lab = 1;
      dataValue = data[groupbys[0]];
      option = myChart.getOption();
      option.series = getSeries('china');
      myChart.setOption(option);
    }
  });
}

EchartsMap.displayName = 'Echarts Map';
EchartsMap.propTypes = propTypes;

export default EchartsMap;

**EchartsMapChartPlugin.js ** 插件文件

/*
 * @Author: bo.lin
 * @Date: 2021-10-14 14:11:25
 * @LastEditors: lijuan.sun
 * @LastEditTime: 2021-10-21 10:35:45
 * @PageTitle: XXX页面
 * @Description: XXX
 * @FilePath: /biSuperset/superset-frontend/src/visualizations/EchartsMap/EchartsMapChartPlugin.js
 */

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

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

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

map.js 地图文件

/*
 * @Author: lijuan.sun
 * @Date: 2021-10-20 16:46:43
 * @LastEditors: lijuan.sun
 * @LastEditTime: 2021-10-26 12:54:09
 * @PageTitle: 页面...
 * @Description: 描述...
 * @FilePath: /biSuperset/superset-frontend/src/visualizations/EchartsMap/map.js
 */
const provinceJson = [
  { name: '安徽', value: 110000, label: 'anhui' },
  { name: '澳门', value: 820000, label: 'aomen' },
  { name: '北京', value: 110000, label: 'beijing' },
  { name: '重庆', value: 110000, label: 'chongqing' },
  { name: '福建', value: 110000, label: 'fujian' },
  { name: '甘肃', value: 110000, label: 'gansu' },
  { name: '广东', value: 110000, label: 'guangdong' },
  { name: '广西', value: 810000, label: 'guangxi' },
  { name: '贵州', value: 810000, label: 'guizhou' },
  { name: '海南', value: 810000, label: 'hainan' },
  { name: '湖北', value: 120000, label: 'hebei' },
  { name: '黑龙江', value: 810000, label: 'heilongjiang' },
  { name: '河南', value: 810000, label: 'henan' },
  { name: '湖北', value: 810000, label: 'hubei' },
  { name: '湖南', value: 120000, label: 'hunan' },
  { name: '江苏', value: 810000, label: 'jiangsu' },
  { name: '江西', value: 810000, label: 'jiangxi' },
  { name: '吉林', value: 810000, label: 'jilin' },
  { name: '辽宁', value: 120000, label: 'liaoning' },
  { name: '内蒙古', value: 810000, label: 'neimenggu' },
  { name: '宁夏', value: 810000, label: 'ningxia' },
  { name: '青海', value: 810000, label: 'qinghai' },
  { name: '山东', value: 120000, label: 'shandong' },
  { name: '上海', value: 810000, label: 'shanghai' },
  { name: '陕西', value: 810000, label: 'shanxi1' },
  { name: '山西', value: 810000, label: 'shanxi' },
  { name: '四川', value: 810000, label: 'sichuan' },
  { name: '台湾', value: 120000, label: 'taiwan' },
  { name: '天津', value: 810000, label: 'tianjin' },
  { name: '香港', value: 810000, label: 'xianggang' },
  { name: '新疆', value: 810000, label: 'xinjiang' },
  { name: '西藏', value: 810000, label: 'xizang' },
  { name: '云南', value: 120000, label: 'yunnan' },
  { name: '浙江', value: 810000, label: 'zhejiang' },
];
// TODO 此处暂时未使用到,如果需要三级,需要在此处新增以及寻找相关城市的json
const cityJson = [
  { name: '石家庄市', value: 130100, dep: '河北' },
  { name: '唐山市', value: 130200, dep: '河北' },
  { name: '秦皇岛市', value: 130300, dep: '河北' },
  { name: '可克达拉市', value: 659008, dep: '新疆' },
  { name: '昆玉市', value: 659009, dep: '新疆' },
];

export { cityJson, provinceJson };

ReactEchartsMap.js

/*
 * @Author: bo.lin
 * @Date: 2021-10-14 14:14:10
 * @LastEditors: lijuan.sun
 * @LastEditTime: 2021-10-21 10:36:57
 * @PageTitle: XXX页面
 * @Description: XXX
 * @FilePath: /biSuperset/superset-frontend/src/visualizations/EchartsMap/ReactEchartsMap.js
 */

import reactify from '@superset-ui/core/esm/chart/components/reactify';
import Component from './EchartsMap';

export default reactify(Component);

transformProps.js

/*
 * @Author: lijuan.sun
 * @Date: 2021-10-19 11:44:59
 * @LastEditors: lijuan.sun
 * @LastEditTime: 2021-10-21 11:03:33
 * @PageTitle: 页面...
 * @Description: 描述...
 * @FilePath: /biSuperset/superset-frontend/src/visualizations/EchartsMap/transformProps.js
 */
export default function transformProps(chartProps) {
  // TODO XXXXX
  const { width, height, queriesData, formData } = chartProps;
  // formData 前端页面的数据
  // queryData  后端返回的数据
  return {
    data: queriesData[0].data,
    width,
    height,
    formData,
  };
}

第四步:右侧模块注册

assets/src/visualizations/presets/MainPreset.js 参照其它案例即可完成

import EchartsMapChartPlugin from '../EchartsMap/EchartsMapChartPlugin';
new EchartsMapChartPlugin().configure({ key: 'echarts_map' }),

第五步:修改package.json(必须)

"echarts": "^4.7.0",

第六步: 后端开发

superset/viz.py

class EchartsMapViz(NVD3Viz):
    """ echarts map"""
    viz_type = 'echarts_map'  # 对应前端名字
    verbose_name = _('Echarts Map')
    credits = 'a <a href="https://github.com/airbnb/superset">Superset</a> original'
    is_timeseries = False

    def run_extra_queries(self):
        qry = super().query_obj()
        metrics = qry['metrics']
        groupbys = qry['groupby']
        # 模仿country
        if not metrics:
            raise QueryObjectValidationError("Must specify a metric")
        if not groupbys:
            raise QueryObjectValidationError("Must provide ISO codes")
        by = []
        self.dataframes = {}
        for groupby in groupbys:
            by.append(groupby)
            for metric in metrics:
                qry.update({'metrics': [metric],'groupby':by})
                df = self.get_df_payload(query_obj=qry).get("df")
                # 为了字符串和对象的拼接
                self.dataframes[groupby+ '_' +str(metric)] = df

    def get_data(self, df):
        tmp_df = df
        metrics = self.form_data.get("metrics") or []
        groupbys = self.form_data.get("groupby") or []
        d = {}
        max_num = 0
        index = 0
        for groupby in groupbys:
            index = index + 1
            midlist = []
            for metric in metrics:
                tmp_df = self.dataframes.get(groupby+ '_' +str(metric))
                list = tmp_df.itertuples(index=False)
                if index == 1:
                    data = [
                        {'name': row[0], 'value': row[1]} for row in list
                    ]
                    mid_max = 0
                    # 新增data是否为空的判断
                    if len(data):
                        mid_max = max([data[i].get('value') for i in range(len(data))])
                    if mid_max > max_num:
                        max_num = mid_max
                else:
                    data = [
                        {'name': row[index-1], 'value': row[index],'key':row[index-2]} for row in list
                    ]
                midlist.append({'name': metric, 'data': data})
            d.update({groupby: midlist})
        d.update({'max': max_num})
        return d

标签:map,name,value,label,810000,省市区,superset,data,Echarts
来源: https://blog.csdn.net/weixin_47027124/article/details/123110948