数据可视化中图表的低无一体

介绍

数据可视化提供了自定义图表模板的功能,以满足现有图表模板无法满足业务需求的情况。

如何使用

  1. 点击数据可视化页面头部的“图表模板”
    image.png
  2. 点击创建按钮后弹出图表模板表单,填写后提交保存
    image.png
  3. 找到刚刚创建的图表模板,点击操作栏中的“低无一体”按钮
    image.png
  4. 点击弹窗底部的“生成sdk”按钮
    image.png
  5. 上一步操作完成后会重新刷新页面,再次找到该条数据,点击“低无一体”按钮,再次进来可以看到“下载模板工程”的按钮已经可以点击了,点击该按钮就可以下载到该自定义图表模板的示例代码包文件kunlun-chart-sdk.zip
    image.png
  6. 解压kunlun-chart-sdk.zip后我们可以看到工程结构,在根目录下执行npm i安装依赖
    image.png
  7. 可以看到packages/kunlun-plugin/src/chart/CUSTOM_BAR.vue是我们自定义的图表vue组件,可以修改里面的自定义展示和逻辑处理
  8. 完成自定义代码后去根目录运行npm run build打包代码,打包后可以在packages/kunlun-plugin/dist下看到打包后的js和css文件(如模板中无css则不会生成css文件,无需理会)
    image.png
  9. 回到自定义图表模板的管理页面,找到对应的数据行,再次点击“低无一体”按钮,在弹窗内上传上一步生成的kunlun-plugin.umd.jskunlun-plugin.css文件,上传完成后点击弹窗底部的“确定”按钮保存
    image.png
  10. 进入图表的编辑页面,在图表分类选择处,可以看到柱状图的分类下有我们新增的“自定义柱状图”的子类,点击切换
    image.png
  11. 切换后可以看到图表已经从开始柱状图变成了我们在前面自定义的蓝色边框样式,内部是hello chart文字的图表。
    image.png

示例自定义图表组件

本例子以echarts的图表库实现柱状图,框架自带的是以G2的库实现的柱状图
demo-echarts-bar.vue

<template>
  <div class="data-designer-chart-instance demo-echarts-bar" ref="designerChartViewRef">
    <div class="data-designer-chart-container" ref="designerChartViewInnerRef"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue';
import DataSet from '@antv/data-set';

import * as echarts from 'echarts/core';
import { ECharts, EChartsCoreOption } from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { BarChart, BarSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { deepClone } from '@kunlun/dependencies';
import {
  filterDimensionScaleColumns,
  isSameObj,
  ChartTypeEnum,
  IChartData,
  IChartDataResult,
  chartViewMixin,
  isNeedRerenderChart,
  isShowChatView,
  watchEchartsSize,
  ChartRenderEngine
} from '@kunlun/data-designer-core';

echarts.use([GridComponent, BarChart, CanvasRenderer]);

export default defineComponent({
  props: {
    ...chartViewMixin.props
  },
  data() {
    return {
      engine: ChartRenderEngine.ECHARTS,
      chartType: [ChartTypeEnum.MAP_CHINA]
    };
  },
  mixins: [chartViewMixin],
  setup(props, { emit }) {
    const chart = ref<ECharts>();
    const designerChartViewRef = ref<HTMLElement>(null as any);
    const designerChartViewInnerRef = ref<HTMLElement>(null as any);
    onMounted(() => {
      initChart();
    });
    let option = {} as EChartsCoreOption;

    function initChart() {
      chart.value = echarts.init(designerChartViewInnerRef.value);
      option = {
        yAxis: {
          type: 'value'
        }
      };
    }

    let oldChartData = {} as IChartData;
    watch(
      () => props.chartData,
      (newVal) => {
        if (!newVal || !chart.value) {
          return;
        }
        if (!isNeedRerenderChart(newVal, oldChartData)) {
          oldChartData = deepClone(newVal);
          return;
        }
        render(chart.value!, newVal, props.chartDataResult);
        oldChartData = deepClone(newVal);
      },
      {
        immediate: true,
        deep: true
      }
    );
    let oldChartDataResult = {} as IChartDataResult;

    function watchDataList(chartData: IChartData, chartDataResult: IChartDataResult) {
      oldChartDataResult = deepClone(props.chartDataResult);
      if (!chart.value) {
        initChart();
      }
      render(chart.value!, chartData, chartDataResult);
    }

    // 监听数据的变动自动重新渲染
    watch(
      () => props.chartDataResult.data,
      () => {
        if (isSameObj(oldChartDataResult, props.chartDataResult)) {
          return;
        }
        if (!designerChartViewRef.value) {
          onMounted(() => {
            watchDataList(props.chartData, props.chartDataResult);
          });
        } else {
          watchDataList(props.chartData, props.chartDataResult);
        }
      },
      { immediate: true, deep: true }
    );

    /**
     * 自定义渲染逻辑
     * @param chart echarts图表对象
     * @param chartData 图表模板的定义
     * @param chartDataResult chartDataResult.data存放的是后端返回的图表数据
     */
    function render(chart: ECharts, chartData: IChartData, chartDataResult: IChartDataResult) {
      if (!isShowChatView(chartData)) {
        return;
      }
      if (!isSameObj(chartData, chartDataResult.chartData)) {
        return;
      }

      const {
        scales = [],
        dimensions = [],
      } = filterDimensionScaleColumns(chartData);

      const dataList = !scales.length || !dimensions.length ? [] : ((chartDataResult.data! || []) as any[]);

      dataList.forEach((a) => {
        if (dimensions.length && !a.name) {
          a.name = a[dimensions[0].chartField.displayName];
        }
        if (scales.length && !a.value) {
          a.value = a[scales[0].chartField.displayName] || null;
        }
      });
      const dv = new DataSet.DataView().source(dataList);

      option.xAxis = {
        type: 'category',
        data: dv.rows?.map((a) => a?.name)
      };
      option.series = [
        {
          type: 'bar',
          data: dv.rows?.map((a) => a?.value)
        } as BarSeriesOption
      ];
      chart.setOption(option);
    }

    // 监听图表容器大小
    watchEchartsSize(props, chart!);

    return { designerChartViewRef, designerChartViewInnerRef, chart };
  }
});
</script>
注册该模板
import { ChartRenderEngine, ChartRenderType, registerChartComponent } from '@kunlun/data-designer-core';
import component from './demo-echarts-bar.vue';

registerChartComponent({
  engine: ChartRenderEngine.ECHARTS,
  render: ChartRenderType.CANVAS,
  chartTemplateCode: 'test002'
},
  {
    component
  } as any
);
效果展示

数据可视化中图表的低无一体

Oinone社区 作者:nation原创文章,如若转载,请注明出处:https://doc.oinone.top/designer/70.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
nation的头像nation数式员工
上一篇 2023年6月20日 pm4:07
下一篇 2023年11月2日 pm1:58

相关推荐

  • 流程设计器的导入导出

    目录 依赖包安装GraphQL的工具登录gql导出生成json文件业务工程中导入示例代码生产环境使用流程设计器 简介 通过调用导出接口,将设计器的设计数据与元数据打包导出到文件中。提供了download/export两类接口。 依赖包 <dependency> <groupId>pro.shushi.pamirs.metadata.manager</groupId> <artifactId>pamirs-metadata-manager</artifactId> </dependency> 安装GraphQL的工具 下载官网地址:https://github.com/Kong/insomnia/releases 登录gql 示例调用代码 mutation { pamirsUserTransientMutation { login(user: { login: "admin", password: "admin" }) { needRedirect broken errorMsg errorCode errorField } } } 导出生成json文件 执行GraphQL,直接返回导出数据。适用于通过浏览器直接下载文件。 指定模块导出 请求示例: mutation { workflowDesignerExportReqMutation { export(data: { module: "demo_core", fileName: "workflow_meta" }) { jsonUrl } } } 指定流程编码导出 请求示例: mutation { workflowDesignerExportReqMutation { export(data: { workflowCode: "WF0000000000132500", fileName: "workflow_meta" }) { jsonUrl } } } 业务工程中导入示例代码 导入元数据示例代码 @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoModuleAppInstall implements MetaDataEditor, LifecycleCompletedAllInit { //流程设计器导出的页面元数据json private static final String INSTALL_WORKFLOW_META_PATH = "install/workflow_meta.json"; @Override public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) { if(StringUtils.isBlank(INSTALL_WORKFLOW_META_PATH)) return; log.info("开始安装-元数据"); try { InitializationUtil util = InitializationUtil.get(metaMap, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME); if (null != util) { // 设计器的元数据 if(StringUtils.isNotBlank(INSTALL_WORKFLOW_META_PATH)) { log.info("开始安装流程设计器元数据"); DesignerInstallHelper.mateInitialization(util, INSTALL_WORKFLOW_META_PATH, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME); } } } catch (Exception e) { log.error("初始化流程设计器导入异常", e); } } @Override public void process(AppLifecycleCommand command, Map<String, ModuleDefinition> runModuleMap) { if(StringUtils.isNotBlank(INSTALL_WORKFLOW_META_PATH)) { log.info("开始安装-流程设计器数据"); // 支持远程调用,但是执行的生命周期必须是LifecycleCompletedAllInit或之后. 本地如果安装了设计器,则没有要求 DesignerInstallHelper.bizInitialization(INSTALL_WORKFLOW_META_PATH); } } } 生产环境使用启动设计器 生产环境如无部署设计器docker镜像,可下载我们oinone-op-ds-all-mini-workflow镜像,单独安装流程设计器。由于导入的是流程设计器的数据,需要在流程设计器中编辑流程,合理设置相关的人员和自定义函数

    2024年5月16日
    1.2K00
  • 左树右表的配置,无代码方式实现

    场景 以公司的部门与员工为示例(需要建一个自关联字段) 第一步先在模型设计器界面创建一个员工模型 第二步在模式设计器界面创建一个部门模型,并建自关联字段与他表模型关联字段 1.创建部门模型 2.创建自关联字段 3.建关联其他模型字段 第三步在界面设计器页面设计树表 1.创建树表页面 2.设计树表 3.设计创建表单 第四步查看效果 1.先创建部门 2.再创建员工 3.最终树表效果

    2023年11月20日
    82200
  • 【界面设计器】树下拉/级联

    阅读之前 你应该: 熟悉模型的增删改查相关内容。【界面设计器】模型增删改查基础 了解联动关系的相关内容。【界面设计器】左树右表 名词解释 字段组件:为字段提供交互能力的组件,一个字段对应一个组件。 关联关系字段:在模型中与其他模型建立关联关系的字段。 可选项:选择组件使用的具体选项,可以是静态的,也可以是动态的。 选中:用户在使用选择组件时,针对某一选项标记或提取这一选项。 概述 本章内容主要是对【界面设计器】左树右表内容中提及的字段相关内容的补充,并非完整教程,有不清楚的地方可以交替阅读进行理解。 场景 沿用【界面设计器】左树右表中的两个场景。 我们可以做出这些优化: 将【商品类目】的【上级类目】组件改为【级联】组件。其第1级为【商品类目】,使用自关联依次展开。 将【部门】的【上级部门】组件改为【树下拉】组件。其第1级为【公司】,第2级为【部门】,【部门】使用自关联依次展开。 PS:本章不提供任何步骤介绍,请根据场景内容自行探索。 扩展知识 具备选择行为的组件 常用的选择组件可以进行一些基本的划分。 从可选数量来看 单选:只能选一个值。 多选:可以选择多个值。 从业务类型来看 枚举(Enum):通过数据字典提供可选项。 布尔(Boolean):可以看作一个特殊的枚举,其可选范围只有是和否。 一对一(O2O)和多对一(M2O):对一(X2O)类型仅支持单选,通过关联模型的数据源提供可选项。 一对多(O2M)以及多对多(M2M):对多(X2M)类型仅支持多选,通过关联模型的数据源提供可选项。 从交互形态来看 单选框(Radio) 多选框(Checkbox) 下拉选择(Select) 树下拉(TreeSelect) 级联(Cascader) 其中,树下拉(TreeSelect)和级联(Cascader)组件要求数据源可以构成树结构,因此通常使用这两个字段组件的都是关联关系字段。 下拉选择(Select) 在介绍树下拉/级联之前,我们有必要先了解一下在关联关系字段中使用下拉选择(Select)这一字段组件的表现情况。 根据关联关系字段对应的关联模型,我们可以获得其组件所需的可选项,在用户进行选中后,该组件将获得一个选项值,并且在表单提交、计算公式等被使用。 通常情况下,我们通过queryPage接口获取分页后的可选项列表,再通过点击/滚动方式获得其他页的可选项供用户选择。 树下拉(TreeSelect)/级联(Cascader) 与上述介绍的下拉选择(Select)不同点在于,其可选项是通过【联动关系】配置进行获取的,它并不要求直接获取到真正可以被选择的可选项,而是通过树结构依次展开的。用户可选择的可选项一定是与关联关系字段对应的关联模型相同的树节点。对于无法选择的节点,其主要作用在于将数据进行划分,以便于用户进行选择。 由于树节点具备特殊性,无法直接使用平台的任何一个模型。因此树结构被定义在UiTreeNode模型中,该模型是描述树结构的基本模型,其提供了多个接口为树结构的查询提供了基本能力。 通常情况下,在创建页面,我们通过UiTreeNode模型的fetchChildren接口依次获取其子节点。在编辑页面,我们通过fetchAll、reverselyQuery、reverselyQueryWithSize这三个接口获取回填的数据,根据不同情况进行调用。虽然使用来不同的接口,但最终都会使用当前模型的queryPage接口获取数据。

    2023年11月1日
    99600
  • 数据可视化-项目中如何引用图表、报表、大屏

    依赖包 在业务工程的pom中增加数据可视化运行的依赖包 参考文档 如何添加数据可视化运行时依赖 数据可视化设计图表、报表和数据大屏 在数据可视化中设计好业务合适的图表,并且发布以后,在界面设计器中可以嵌入该图表同样处理的还有报表 在界面设计器中在页面中透出图表、报表和数据大屏 设置图表,选择已经对应的图表 可在表单以及详情的页面中嵌入对应的图表、报表和数据大屏 更新图表、报表和数据大屏 修改图表以后,需要更新发布,对应业务页面上才会更新最新的图表

    2024年5月18日
    1.0K00
  • 表格字段配置Switch开关

    在业务开发中,我们经常会遇到表格中有个Switch开关组件: 那么如何通过界面设计器配置这个组件呢,下面让我们一起来学习下吧。 设计布尔类型的组件 1: 首先在界面设计器的组件区域添加一个组件。 2: 我们给这个组件添加一个元件,元件的配置必须跟下面的一致 3: 给元件添加属性配置 拖拽一个单行文本字段, 字段编码必须是truthyAction,代表的是该字段为true的时候要执行的动作 再拖拽一个单行文本字段, 字段编码必须是falsyAction,代表的是该字段为false的时候要执行的动作 4: 发布元件,然后再去对应的界面设计器页面,将对应的字段切换成刚刚设计的组件 5: 发布界面设计器,染红我们可以在运行时的页面看到效果 当switch切换的时候,会执行对应的action

    2023年11月21日
    85900

Leave a Reply

登录后才能评论