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

介绍

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

如何使用

  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. 发布成开放平台接口 3.1 一键勾选多个发布开放平台,可重复发布 3.2 查看开发平台接口列表 3.3 查看开发平台接口详情 3.4 查看开发平台接口详情 4. 创建生成开放平台授权应用 5. postman模拟请求 5.1 获取Oinone开发平台APIKEY和APISecret 在开发接口列表中找到对应授权应用,点击查看密钥,获得APIKEY和APISecret 5.2 请求接口生成accessToken 接口请求 curl –location –request POST 'http://localhost/openapi/get/access-token' \ –header 'appKey: d63cb1d2c2af4e6b95f36b172804e2cc' \ –header 'appSecret: aQ0BwU/vpcLTm5swRaqXW6O5RUdrwOFGJF2nt2I4boIe7luRzul7y8msnKZuPKtvKprmGpw8z29+djBTUkKaV3zBZ4ZPSbaOkiiTB0AQvoPnPBnHxpF6M8xxDlS13hCRy0D01pcc8DbEwWYPetvp7j8WwLL6q3FusJaZPISPLuucT1hxnrCIA2fe72X7UxojROtOfBvYw6+JFv0E8xwrGLfXXX99wbTywuMzhEoqv64dYR2tfNLubua1xJnf/iAhFao+gw7y/44CZ1u3sUpFeIn5T9MnXB3BDVJnanSZTsxnl5wWY9HojrqtSfPJpcd59OKEmehpbHT9++muvDHgdM5zhbS6NhgSXKdH/kOQEP695RcB09AJxHIwcNF6hv4wGBNsAzHFUMx2QTgwHLONmFjx85ZNkp1iD8L3CYn+5kH2FAO+PG9KG/HvJRGoiViF53LyCSzf5FKj0uUY4QCHbTXXNfCE2L04PNlRj1Hj17JKxcTQ6ea1GsslYG5GjiOET2mRWw+DdnxK6S3GGR0pudRD3K22eG+ZLe/IY4sbMmJfAh8daYtOGcDuoiNXXbUUsf9uSgDDBihXy9ajNQUh8qIHb+N5dqbm/o69WLPUYVYvUzWZt23LHCLj1G8iZTTgkPmdhBsXGRcCBtyMpA7Vfci1TuBzuKrLPnB51T2hGhw=' 响应结果 { "access_token": "P0ztlcF+cL0RmRwTqjw6+i03NPScjdJptXQu4W98h0mssJl/5Bsg095ohzdCQtQu", "success": true, "errorCode": 0, "expires_time": 7200, "errorMsg": "ok" } 5.3 模拟请求钉钉接口 接口请求 curl –location 'http://localhost/openapi/dingtalk/api/v1.0/oauth2/accessToken' \ –header 'accessToken: P0ztlcF+cL0RmRwTqjw6+i03NPScjdJptXQu4W98h0k+xvGkaQmOCqCqKFEe5uNE' \ –header 'Content-Type: application/json' \ –data '{ "appKey": "dinguhgmdxva33gs8oaz", "appSecret": "QlxE8g7xoOCmVOZ9nGy-dqMduMstmxRFNGjENCyuwEVHa9jaxy6CioQYjEFkxHAM" }' 响应结果 { "expireIn": 7200, "accessToken": "f87a4ef669ae35879c5b1ee6237a584b", "http": { "headers": { "Content-Type": "application/json" } } } 5.3 模拟动态参数请求钉钉接口 使用postman请求是对应地址openapi/dingtalk/api/v1.0/{oauth}/accessToken需改成openapi/dingtalk/api/v1.0/:oauth/accessToken 接口请求 curl –location 'http://localhost/openapi/dingtalk/api/v1.0/oauth2/accessToken' \ –header 'accessToken: P0ztlcF+cL0RmRwTqjw6+i03NPScjdJptXQu4W98h0k+xvGkaQmOCqCqKFEe5uNE' \ –header 'Content-Type: application/json' \ –data '{ "appKey": "dinguhgmdxva33gs8oaz", "appSecret": "QlxE8g7xoOCmVOZ9nGy-dqMduMstmxRFNGjENCyuwEVHa9jaxy6CioQYjEFkxHAM" }' 响应结果 { "expireIn": 7200, "accessToken": "f87a4ef669ae35879c5b1ee6237a584b", "http": { "headers": { "Content-Type": "application/json" } } }

    2024年3月28日
    55900
  • 计算属性如何配置按条件展示不同的值

    1.打开计算公式,点击“fx”字样的图标添加函数 2.选择逻辑函数分类下的条件函数 3.在第一个输入框填写条件,这里可以手写条件的表达式,后面2个输入框分别是条件成立时的值和条件不成立时的值,可以手动输入表达式 表达式中的activeRecord,在表格中代表当前表格行的数据,在表单中为整个表单的数据

    2024年5月16日
    60700
  • 数据可视化的导入导出

    目录 依赖包安装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 { dataDesignerExportReqMutation { export(data: { fileName: "datavi_data" }) { jsonUrl } } } 指定图表导出 请求示例: mutation { dataDesignerExportReqMutation { export(data: { chartCode: "CT00000000002000", fileName: "datavi_data" }) { jsonUrl } } } 对应chartCode为图表的编码code,可通过查询数据库来获得 指定报表导出 请求示例: mutation { dataDesignerExportReqMutation { export(data: { reportCode: "RP00001000", fileName: "datavi_data" }) { jsonUrl } } } 对应reportCode为报表的编码code,可通过查询数据库来获得 指定业务大屏导出 请求示例: mutation { dataDesignerExportReqMutation { export(data: { screenCode: "DS00001000", fileName: "datavi_data" }) { jsonUrl } } } 对应screenCode为数据大屏的编码code,可通过查询数据库来获得 业务工程中导入示例代码 导入元数据示例代码 @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoModuleAppInstall implements MetaDataEditor, LifecycleCompletedAllInit { //流程设计器导出的页面元数据json private static final String INSTALL_DATAVI_META_PATH = "install/datavi_data.json"; @Override public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) { if(StringUtils.isBlank(INSTALL_DATAVI_META_PATH)) return; log.info("开始安装-元数据"); try { InitializationUtil util = InitializationUtil.get(metaMap, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME); if (null != util) { // 设计器的元数据 if(StringUtils.isNotBlank(INSTALL_DATAVI_META_PATH)) { log.info("开始安装图表元数据"); DesignerInstallHelper.mateInitialization(util, INSTALL_DATAVI_META_PATH, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME); } } } catch (Exception e) { log.error("图表设计器元数据导入异常", e); } } @Override public void process(AppLifecycleCommand command, Map<String, ModuleDefinition>…

    2024年5月16日
    1.4K00
  • 如何添加数据可视化运行时依赖

    前端 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日
    64400
  • 数据可视化-项目中如何引用图表、报表、大屏

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

    2024年5月18日
    1.0K00

Leave a Reply

登录后才能评论