如何添加数据可视化运行时依赖

相关推荐

• 数据可视化

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

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

  nation

  2023年11月1日

  1.1K000
• 后端部署

  数据源配置使用注意事项

  启动工程的application.yml内可以通过ds-map为每个模块配置数据源，未在ds-map指定的会根据default-ds-key的值设置默认的数据源, 1. 共一套base库的所有启动工程，相同模块的dsKey名称一定要是一样的 2. 如果有需求2个启动工程中对同一个模块要区分库，如：2个启动工程的“用户user模块”读不同的库，那么需要将配置中“用户user模块”的dsKey配置一致，然后在各自启动工程配置中的数据库链接地址填不一样

  nation

  2024年7月25日

  1.7K000
• 后端

  【HighGo】后端部署使用HighGo数据库

  HighGo数据库配置 驱动配置 jdbc仓库 https://mvnrepository.com/artifact/com.highgo/HgdbJdbc Maven配置（6.0.1版本可用） <highgo.version>6.0.1.jre8</highgo.version> <dependency> <groupId>com.highgo</groupId> <artifactId>HgdbJdbc</artifactId> <version>${highgo.version}</version> </dependency> JDBC连接配置 pamirs: datasource: base: type: com.alibaba.druid.pool.DruidDataSource driverClassName: com.highgo.jdbc.Driver url: jdbc:highgo://127.0.0.1:5866/oio_base?currentSchema=base,utl_file username: xxxxxx password: xxxxxx initialSize: 5 maxActive: 200 minIdle: 5 maxWait: 60000 timeBetweenEvictionRunsMillis: 60000 testWhileIdle: true testOnBorrow: false testOnReturn: false poolPreparedStatements: true asyncInit: true 连接url配置 官方文档 https://www.highgo.com/document/zh-cn/application/jdbc.html url格式 jdbc:highgo://ip:端口号/数据库名?currentSchema=schema1,schema2 在jdbc连接配置时，${database}和${schema}必须完整配置，不可缺省。 jdbc指定schema时可以在currentSchema后指定多个schema，中间用,分隔，第一个schema为业务库表存放的主schema。 highgo数据库6.0版本里每个数据库默认会带一个utl_file的schema，该模式与文件访问功能有关，需要带在jdbc的schema中，但不能放在第一个。 其他连接参数如需配置，可自行查阅相关资料进行调优。 方言配置 pamirs方言配置 pamirs: dialect: ds: base: type: HighGoDB version: 6 major-version: 6.0.1 biz_data: type: HighGoDB version: 6 major-version: 6.0.1 数据库版本 type version majorVersion 6.0.x HighGo 6 6.0.1 PS：由于方言开发环境为6.0.1版本，其他类似版本（6.0.x）原则上不会出现太大差异，如出现其他版本无法正常支持的，可在文档下方留言。 schedule方言配置 pamirs: event: enabled: true schedule: enabled: true dialect: type: HighGoDB version: 6 major-version: 6.0.1 其他配置 逻辑删除的值配置 pamirs: mapper: global: table-info: logic-delete-value: (EXTRACT(epoch FROM CURRENT_TIMESTAMP) * 1000000 + EXTRACT(MICROSECONDS FROM CURRENT_TIMESTAMP))::bigint Highgo数据库用户初始化及授权 — init oio_base user (user name can be modified by oneself) CREATE USER oio_base WITH PASSWORD 'Test@12345678'; — if using automatic database and schema creation, this is very important. ALTER USER oio_base CREATEDB; SELECT * FROM pg_roles; — if using highgo database, this authorization is required. GRANT CREATE ON DATABASE highgo TO oio_base;

  Gesi

  2025年7月10日

  380000
• 后端部署

  如何解决界面设计器保存提示：元数据不存在或已删除

  现象 界面设计器设计页面的时候，从左侧边栏模型下拖入了一个字段到页面，保存的时候提示：元数据不存在或已删除 原因 共base库不共元数据缓存redis导致的，不共redis的情况下，每次本地新增或修改元数据(如：字段、方法)启动后会同步本地redis，再去线上启动的时候，由于元数据已经在本地写入到了base库，所以该次启动不会触发redis差量更新 解决方案 通过将boot工程application.yml以下配置，让redis全量刷新元数据缓存 pamirs: distribution: session: allMetaRefresh: true 扩展 这个方法只能解决新增或修改元数据，如果出现了删除元数据的话，改为true也不行，清空或者手动删除问题redis的key都可以

  nation

  2024年7月21日

  1.1K000
• 数据可视化

  数据可视化-图表在业务页面如何加动态查询条件

  前提 阅读此文章前，默认读者已了解了界面设计器和数据可视化的基本操作图表基础操作文档 1.新建一个表单视图，要求表单的模型里有动态查询条件的字段 从左侧组件库找到“图表”组件，拖入到视图区域，在右侧属性面板选择已经发布过的图表 2.将“组件库”->“模型”下的查询条件字段拖入到视图区域，然后再选择图表，设置图表组件属性面板内的“查询条件” 查询条件为rsql语法，里面的变量需要用${}包裹起来，其中的activeRecord为当前视图的数据对象，下图中的activeRecord.field000015为推荐导购员的对象，我们拿了这个对象的id传到查询条件内 3.绑定菜单后，可以去运行时页面查看效果 通过浏览器的开发者工具，我们可以看到，选中导购员后查询条件发生了改变，页面的数据也同步发生了变化

  nation

  2024年8月28日

  1.5K000