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

已于 2022-02-25 08:53:33 修改
阅读量1.8k 收藏 7
点赞数 5
文章标签： echarts javascript ecmascript
于 2022-02-24 15:22:13 首次发布
原文链接：https://blog.csdn.net/tb77506668/article/details/107716407
版权

如有需要，我可以给大家发代码包，评论区留下你的邮箱地址

第一步：左侧控制栏开发

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

/*
 * @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
monkey01127
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 39
    评论
vue2版本用echarts实现地图下钻功能 注释详细cv可用
还想陪你看场雪
04-24 523
vue2版本用echarts-gl实现地图下钻
superset1.5开发，中国地图实现中文版
Daylighte的博客
02-09 922
superset二次开发，配置中文版中国地图
superset引入echarts
10-10
引入Echarts superset版本 0.26 本⽂文以漏漏斗斗图为例,添加选择图形的缩略略图
Superset 0.34集成Echarts地图并下钻(0.36可参考)
tb77506668的博客
07-31 2006
Superset 地图(下钻)开发 1, 左侧控制栏开发 新增 assets/src/explore/controlPanels/EchartsMap.js import { t } from '@superset-ui/translation'; export default { controlPanelSections: [ { label: t('GROUP BY'), expanded: true, c
Superset 表格下钻(基于时间维度,地域维度和普通维度)
tb77506668的博客
07-31 5812
Superset 表格下钻 基于时间维度,低于维度和普通维度 1, 左侧控制栏开发 assets/src/explore/controlPanels/DrillTable.js /** * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for add
d3 和echart_最新版本的Superset 如何集成Echart?
weixin_35572363的博客
12-31 397
一、基本环境Superset version: 0.99Python:3.7Echart 4.5二、前置技术点React、d3、Python、Django、Notejs三、安装开发版本Superset3.1 windows版本1）配置好Python、JDK环境2）下载最新版本superset https://github.com/apache/incubator-superset3) 切换目录 i...
superset 接入可视化echarts图表
weixin_33941350的博客
05-17 3027
superset添加echarts图 为支持更多可视化图表，我司准备在seperset原始D3图表基础上，继续增加echarts可视化图表的类型，以供客户更直观的看到数据。这篇文章里将分为四个步骤，每个步骤紧密联系，缺一不可。 效果图： 目前已添加echarts图表。 最后通过查询，我们得到的实体数据通过添加的echarts图表已经显示。 步骤一：选择添加的echarts图，[charts官方...
superset集成echarts.docx
07-17
在本文中，我们将介绍如何在 Apache Superset 中集成 Echarts，实现丰富的数据可视化。 一、安装 Node.js 和 Yarn 在开始集成 Echarts 之前，我们需要安装 Node.js 和 Yarn。Node.js 是一个基于 JavaScript 的...
win10系统下安装superset的步骤
09-14
主要介绍了win10系统下安装superset的步骤，本文是基于python3.7 win10 64位下的环境安装,需要的朋友可以参考下
superset2.0在Windows环境和Linux环境下的安装配置
08-10
superset2.0在Windows环境和Linux环境下的安装配置
superset在Windows下安装说明
12-04
Windows下安装SuperSet操作说明，Superset是由Airbnb（知名在线房屋短租公司）开源BI数据分析与可视化平台（曾用名Caravel、Panoramix），该工具主要特点是可自助分析、自定义仪表盘、分析结果可视化（导出）、用户/...
superset 0.38 前端
12-08
superset 0.38 前端 superset 0.38 前端 superset 0.38 前端 superset 0.38 前端
Echarts地图相关功能整合
12-11
Echarts是一款开源、功能强大的数据可视化产品。之前做图表一直都是使用Highcharts来做的，Echarts与Highcharts大致用法差不多，最近用到了Echarts的地图功能，把官网上的两个例子整合了一下终于达到了要求。贴出来跟大家分享一下。另附上新疆各市县经纬度js文件一份(xjGeoCoord.js)
Superset集成ECharts（一重奏）
Don't love me博客
02-19 6410
superset版本：0.28 echarts版本：3.8.5 刚开始接到这个任务时，说是要改superset源码，what？？嗯…整个人是蒙的。先不管大方面，既然要做superset先安装上。本文以漏斗图为例 环境搭建 操作系统：CentOS Linux release 7.5.1804 (Core) python版本：3.6.4，对于0.28的superset最好不要用python2要用pyt...
Docker部署Superset 2.1.0+开发环境+汉化+匿名访问+创建自定义图表（二次开发）+集成echarts+echarts百度地图
热门推荐
weixin_43219396的博客
04-23 1万+
Docker部署Superset 2.1.0+开发环境+汉化+匿名访问+创建自定义图表（二次开发）+集成echarts+echarts百度地图
【BI数据可视化】Superset绘制地图，ISO 3166-2 CODES国家城市编码，中国地图
最新发布
wenchun001的博客
05-31 1235
BI数据可视化，Superset绘制地图，需要关联国家编码。ISO 3166-2 CODES国家城市编码，中国地图.
SuperMap区域定位
weixin_44484452的博客
04-27 1484
如下图，点击定位按钮后查询并显示定位区域 首先打开SuperMap的地图，找到需要定位的底图。把它复制出来后，使用对象操作里的切割功能切成需要的定位的块。如果有已经做好的数据的就不需要使用这个方法切割了 然后保存成数据集，每区域的名称就要在属性表里面手动添加，再把它放到地图里面，记得把眼睛关掉，最好放在底图的上一层，避免查询时覆盖掉其他的内容。 代码部分 首先的是显示地图，声明一个矢量图层用...
Superset系列9- 制作地图
只是甲的博客
11-22 1020
文章目录一. 创建图表1.1 点击 Charts/+CHART1.2 选择数据源及图表类型，这里选择地址1.3 配置如下1.4 命名并保存到仪表盘参考: 一. 创建图表 1.1 点击 Charts/+CHART 1.2 选择数据源及图表类型，这里选择地址 1.3 配置如下 1.4 命名并保存到仪表盘 参考: https://blog.csdn.net/weixin_45417821/article/details/119919345 ...
Superset部署+连接MySQL8+省份地图可视化
ArYe
02-19 3758
ERROR: (MySQLdb._exceptions.OperationalError) (2059, "Authentication plugin 'caching_sha2_password' cannot be loaded: so: cannot open shared object file: No such file or directory") Superset是否具有动态可视化功能？
superset echarts
03-29
Superset is an open-source data exploration and visualization platform. It provides a user-friendly interface for data analysis and reporting. Echarts is a powerful charting library developed by Baidu. It provides a wide range of charts and graphs to visualize data. Superset integrates with Echarts to provide advanced data visualization capabilities. Users can create interactive dashboards and reports using the drag-and-drop interface of Superset. The charts and graphs are powered by Echarts, which provides high-quality visualizations with a wide range of customization options. The Superset-Echarts integration allows users to create beautiful visualizations with ease. It supports a wide range of chart types, including bar charts, line charts, pie charts, scatter plots, and more. Users can also customize the charts with various options such as color schemes, labels, and annotations. Overall, the Superset-Echarts integration provides a powerful data visualization solution that is easy to use and highly customizable. It is an ideal tool for data analysts, data scientists, and business users who need to visualize and communicate data insights effectively.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 39
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值