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

介绍

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

如何使用

  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

相关推荐

  • 左树右表的配置,无代码方式实现

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

    2023年11月20日
    86700
  • 接口日志内容记录频率限制功能说明

    为有效避免接口调用日志记录占用过多存储空间,从而减少对数据库资源的消耗,自5.2.0之后的版本,对于成功请求的集成接口与开放接口,其日志将不再进行完整记录。请求及响应参数将依据默认的千分之一概率进行选择性完整记录。 修改日志完整记录频率 日志完整记录频率默认0.01,即千分之一。 取值范围0~1,0为完全不记录,1为100%记录。 pamirs: eip: log: frequency: 0.01 临时开启某接口日志完整记录 在“集成接口”应用中,可临时针对某一接口开启完整日志记录功能,此功能适用于集成接口与开放接口。 在“集成设计器”中也支持此功能。 注意事项 请求失败的接口不会受到配置的影响,日志内容将被完整记录。

    2024年10月8日
    58600
  • 弹窗或抽屉表单视图rootRecord获取不到对应的数据

    在平台默认的实现中,rootRecord 代表的是根视图的数据。比如,在表格页面点击按钮打开了弹窗,弹窗里面包含一个表单视图,但是该视图获取 rootRecord 却是最外层的视图数据。 如果期望 rootRecord 数据是弹窗的视图数据,需要手动修改表单的 rootRecord。下面的代码演示了如何重写 rootData 以确保其数据是弹窗的数据: @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Form, widget: 'MyCustomFormWidgetFormWidget' }) ) export class MyCustomFormWidgetFormWidget extends FormWidget { @Widget.Reactive() @Widget.Provide() public get rootData(): any[] | undefined { return this.activeRecords; } } 上述代码重写了 rootData,这样就可以确保 rootData 的数据是弹窗的数据。 接下来就是注册: registerLayout( ` <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="MyCustomFormWidgetFormWidget" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> `, { viewType: ViewType.Form, model: '弹窗模型', viewName: '弹窗视图名称' } )

    2023年11月13日
    94700
  • 项目中工作流引入和流程触发

    目录 1. 使用工作流需要依赖的包和设置2. 触发方式2.1 自动触发方式2.2 触发方式 1.使用工作流需要依赖的包和设置 1.1 工作流需要依赖的模块 需在pom.xml中增加workflow、sql-record和trigger相关模块的依赖 workflow:工作流运行核心模块 sql-record:监听流程发布以后对应模型的增删改监听 trigger:异步任务调度模块 <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-sql-record-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-bridge-tbschedule</artifactId> </dependency> 在application.yml中增加对应模块的依赖以及sql-record路径以及其他相关设置 pamirs: … record: sql: #改成自己路径 store: /opt/pamirs/logs … boot: init: true sync: true modules: … – sql_record – trigger – workflow … sharding: define: data-sources: ds: pamirs models: "[trigger.PamirsSchedule]": tables: 0..13 event: enabled: true schedule: enabled: true # ownSign区分不同应用 ownSign: demo rocket-mq: # enabled 为 false情况不用配置 namesrv-addr: 192.168.6.2:19876 trigger: auto-trigger: true 2.触发方式 2.1自动触发方式 在流程设计器中设置触发方式,如果设置了代码触发方式则不会自动触发 2.2代码调用方式触发 2.2.1.再流程设计器中触发设置中,设置为是否人工触发设置为是 2.2.2.查询数据库获取该流程的编码 2.2.3.在代码中调用 /** * 触发⼯作流实例 */ private Boolean startWorkflow(WorkflowD workflowD, IdModel modelData) { WorkflowDefinition workflowDefinition = new WorkflowDefinition().queryOneByWrapper( Pops.<WorkflowDefinition>lambdaQuery() .from(WorkflowDefinition.MODEL_MODEL) .eq(WorkflowDefinition::getWorkflowCode, workflowD.getCode()) .eq(WorkflowDefinition::getActive, 1) ); if (null == workflowDefinition) { // 流程没有运⾏实例 return Boolean.FALSE; } String model = Models.api().getModel(modelData); //⼯作流上下⽂ WorkflowDataContext wdc = new WorkflowDataContext(); wdc.setDataType(WorkflowVariationTypeEnum.ADD); wdc.setModel(model); wdc.setWorkflowDefinitionDefinition(workflowDefinition.parseContent()); wdc.setWorkflowDefinition(workflowDefinition); wdc.setWorkflowDefinitionId(workflowDefinition.getId()); IdModel copyData = KryoUtils.get().copy(modelData); // ⼿动触发创建的动作流,将操作⼈设置为当前⽤户,作为流程的发起⼈ copyData.setCreateUid(PamirsSession.getUserId()); copyData.setWriteUid(PamirsSession.getUserId()); String jsonData = JsonUtils.toJSONString(copyData.get_d()); //触发⼯作流 新增时触发-onCreateManual 更新时触发-onUpdateManual Fun.run(WorkflowModelTriggerFunction.FUN_NAMESPACE, "onCreateManual", wdc, msgId, jsonData); return Boolean.TRUE; }

    2023年11月7日
    87100
  • 如何添加数据可视化运行时依赖

    前端 package.json中新增依赖 @kunlun/data-designer-open-pc,版本跟@kunlun/dependencies的填一样 src/main.ts内导入依赖 import 'reflect-metadata'; import { VueOioProvider } from '@kunlun/dependencies'; // START 导入代码放在导入@kunlun/dependencies之后 import '@kunlun/data-designer-open-pc'; // END 导入代码放在VueOioProvider()方法执行前 VueOioProvider({ // TODO }); 后端 父pom新增依赖 <properties> <pamirs.data.visualization.version>4.7.8</pamirs.data.visualization.version> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>pro.shushi.pamirs.data.visualization</groupId> <artifactId>pamirs-data-visualization</artifactId> <version>${pamirs.data.visualization.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> 2.boot启动工程的pom新增依赖 <dependency> <groupId>pro.shushi.pamirs.data.visualization</groupId> <artifactId>pamirs-data-visualization-core</artifactId> </dependency> 3.application.yml配置新增依赖 pamirs: boot: modules: – datavi 注意:datavi 这个模块在业务工程和设计器指定数据源要保持一致。

    2024年5月15日
    66200

Leave a Reply

登录后才能评论